| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | |
|---|
| | | <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8" /> |
|---|
| | | <title>全局状况看板</title> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/index.css"> |
|---|
| | | <script src="js/jquery.min.js"></script> |
|---|
| | | <script src='js/echarts.min.js'></script> |
|---|
| | | <script src="js/bootstrap.min.js"></script> |
|---|
| | | <script src='js/bootstrap-table.min.js'></script> |
|---|
| | | <script src='js/bootstrap-select.min.js'></script> |
|---|
| | | <script src='js/bootstrap-table-zh-CN.min.js'></script> |
|---|
| | | <script src="js/jquery.SuperSlide.2.1.3.js"></script> |
|---|
| | | <script src='js/template.js'></script> |
|---|
| | | <script src="js/jquery.qrcode.min.js"></script> |
|---|
| | | <script src="js/webConfig.js"></script> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | padding-left: 50px; |
|---|
| | | padding-right: 50px; |
|---|
| | | font-family: KaiTi; |
|---|
| | | /*background-color: #031f52;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .box:after { |
|---|
| | | content: ""; |
|---|
| | | display: block; |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | background: url(../KanBanUI/img/body.jpg) no-repeat center center; /*加载背景图：图片地址 不平铺 */ |
|---|
| | | background-size: cover; /* 让背景图基于容器大小伸缩 */ |
|---|
| | | background-attachment: fixed; /* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 |
|---|
| | | scroll 背景图片随着页面的滚动而滚动，这是默认的。 |
|---|
| | | fixed 背景图片不会随着页面的滚动而滚动。 |
|---|
| | | local 背景图片会随着元素内容的滚动而滚动。*/ |
|---|
| | | |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | /*opacity: 0.1;*/ |
|---|
| | | z-index: -1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr0 { |
|---|
| | | height: 80px; |
|---|
| | | /*background-color: aquamarine;*/ |
|---|
| | | width: 100% |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr1 { |
|---|
| | | height: 600px; |
|---|
| | | /*background-color: aquamarine;*/ |
|---|
| | | width: 100% |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1 { |
|---|
| | | width: 13%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | margin-right: 2%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 7%; |
|---|
| | | background: linear-gradient(270deg,#196bcb00,#1391ba); |
|---|
| | | line-height: 300%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-1 p { |
|---|
| | | font-size: 20PX; |
|---|
| | | text-align: center; |
|---|
| | | height: 100%; |
|---|
| | | /*padding-left: 5%;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 93%; |
|---|
| | | font-size:20px; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2 p { |
|---|
| | | padding-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2 h2 { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-j { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-w { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-z { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-d { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2 { |
|---|
| | | width: 70%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | margin-right: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background-color: #865454; |
|---|
| | | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25 125 239 / 64%)), color-stop(100%,rgba(125,185,232,0))); |
|---|
| | | /*border:solid 1px #0ddae8*/ |
|---|
| | | } |
|---|
| | | .col2-1-p { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #0d5974;*/ |
|---|
| | | margin: 0 auto; |
|---|
| | | line-height: 100%; |
|---|
| | | padding:1% 10%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-1-p p { |
|---|
| | | font-size: 32px; |
|---|
| | | text-align: center; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | line-height: 160%; |
|---|
| | | /*background-color: #88ace74d;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #d6bbbb;*/ |
|---|
| | | background: url(../KanBanUI/img/bj.png) no-repeat center center; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-l { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-l p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-c { |
|---|
| | | width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-c p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r2 { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r3 { |
|---|
| | | width: 18%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r3 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 10%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-l { |
|---|
| | | width: 12%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-l p { |
|---|
| | | text-align: right; |
|---|
| | | font-size:20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-c { |
|---|
| | | width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-c p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r { |
|---|
| | | width: 18%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r2 { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r3 { |
|---|
| | | width: 19%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r3 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3 { |
|---|
| | | width: 100%; |
|---|
| | | height: 29%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 10%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-l { |
|---|
| | | width: 31%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-l p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r { |
|---|
| | | width: 26%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r2 { |
|---|
| | | width: 23%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4 { |
|---|
| | | width: 100%; |
|---|
| | | height: 5%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-l { |
|---|
| | | width: 15%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-l p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-c { |
|---|
| | | width: 25%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-c p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r2 { |
|---|
| | | width: 23%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5 { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-bottom:2%;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-l { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-l p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-lc { |
|---|
| | | width: 10%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-top: 2%;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-lc p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-c { |
|---|
| | | width: 16%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-c p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-cr { |
|---|
| | | width: 9%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-top: 2%;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-cr p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-rr2 { |
|---|
| | | width: 9%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-top: 2%;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-rr2 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r { |
|---|
| | | width: 15%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r2 { |
|---|
| | | width: 14%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3 { |
|---|
| | | width: 13%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 7%; |
|---|
| | | background: linear-gradient(270deg,#196bcb00,#1391ba); |
|---|
| | | line-height: 300%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-1 p { |
|---|
| | | font-size: 20PX; |
|---|
| | | text-align: center; |
|---|
| | | height: 100%; |
|---|
| | | /*padding-left: 5%;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 93%; |
|---|
| | | font-size:20px; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2 p { |
|---|
| | | padding-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2 h2 { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-j { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-w { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-z { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-d { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-t { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2 { |
|---|
| | | height: 300px; |
|---|
| | | /*background-color: #e0dddd;*/ |
|---|
| | | width: 100%; |
|---|
| | | padding-top: 1%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | float: left; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1-on { |
|---|
| | | width: 100%; |
|---|
| | | height: 10%; |
|---|
| | | background: linear-gradient(270deg,#196bcb00,#1391ba); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1-on p { |
|---|
| | | text-align: left; |
|---|
| | | padding-left: 2%; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1-in { |
|---|
| | | width: 100%; |
|---|
| | | height: 90%; |
|---|
| | | /*background-color: #c7c5db;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-2 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | float: left; |
|---|
| | | margin-left: 1%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-3 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | float: left; |
|---|
| | | margin-left: 1%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-4 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | background: rgb(0 104 255 / 23%); |
|---|
| | | float: left; |
|---|
| | | margin-left: 1%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clock { |
|---|
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
|---|
| | | font-size: 20px; |
|---|
| | | float: right; |
|---|
| | | margin-top: -44px; |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clock ul { |
|---|
| | | width: 450px; |
|---|
| | | margin: 0 auto; |
|---|
| | | padding: 0px; |
|---|
| | | list-style: none; |
|---|
| | | text-align: right; |
|---|
| | | margin-left: 15px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clock ul li { |
|---|
| | | display: inline; |
|---|
| | | font-size: 24px; |
|---|
| | | text-align: left; |
|---|
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
|---|
| | | text-shadow: 0 0 0px #00c6ff; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | $(document).ready(function () { |
|---|
| | | // 创建两个变量，一个数组中的月和日的名称 |
|---|
| | | var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]; |
|---|
| | | setInterval(function () { |
|---|
| | | var date1 = new Date; |
|---|
| | | var year = date1.getFullYear(); |
|---|
| | | var month = date1.getMonth(); |
|---|
| | | var day = date1.getDate(); |
|---|
| | | var hh = date1.getHours(); |
|---|
| | | var mm = date1.getMinutes(); |
|---|
| | | var ss = date1.getSeconds(); |
|---|
| | | |
|---|
| | | |
|---|
| | | $('#Date').html(year + "-" + monthNames[month] + '-' + (day < 10 ? "0" + day : day) + " "); |
|---|
| | | $("#hours").html((hh < 10 ? ("0" + hh) : hh)); |
|---|
| | | $("#min").html((mm < 10 ? ("0" + mm) : mm)); |
|---|
| | | $("#sec").html((ss < 10 ? ("0" + ss) : ss)); |
|---|
| | | |
|---|
| | | }, 1000); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | $(function () { |
|---|
| | | var mychart1 = echarts.init(document.getElementById('mychart1')); |
|---|
| | | var mychart2 = echarts.init(document.getElementById('mychart2')); |
|---|
| | | var mychart3 = echarts.init(document.getElementById('mychart3')); |
|---|
| | | var mychart4 = echarts.init(document.getElementById('mychart4')); |
|---|
| | | |
|---|
| | | Chart(mychart1, mychart2, mychart3, mychart4); |
|---|
| | | |
|---|
| | | setInterval(function () { |
|---|
| | | Chart(mychart1, mychart2, mychart3, mychart4); |
|---|
| | | }, 60000); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | //根据窗口的大小变动图表 --- 重点 |
|---|
| | | window.onresize = function () { |
|---|
| | | mychart1.resize(); |
|---|
| | | mychart2.resize(); |
|---|
| | | mychart3.resize(); |
|---|
| | | mychart4.resize(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }); |
|---|
| | | var PubRes = []; |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | function Chart(mychart1, mychart2, mychart3, mychart4) { |
|---|
| | | //所有工序在制 生产数量 |
|---|
| | | get_Proc(); |
|---|
| | | //当前状态 |
|---|
| | | get_CurrentState(); |
|---|
| | | //折线图 |
|---|
| | | get_LineChart(mychart1, mychart3); |
|---|
| | | //柱状图 |
|---|
| | | get_Histogram(mychart2); |
|---|
| | | //仪表盘 |
|---|
| | | get_Dashboard(mychart4); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //当前状态 |
|---|
| | | function get_CurrentState() { |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/get_CurrentState", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | var HQty = 0.0; |
|---|
| | | for (var i = 0; i < PubRes.data[0].length; i++) { |
|---|
| | | HQty += PubRes.data[0][i].InHQty; |
|---|
| | | } |
|---|
| | | $("#jh").text(res.data[0][0]["HQty"].toLocaleString()); |
|---|
| | | $("#wc").text(res.data[1][0]["HQty"].toLocaleString()); |
|---|
| | | $("#zz").text(HQty.toLocaleString()); |
|---|
| | | $("#dd").text(res.data[2][0]["HQty"].toLocaleString()); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //工序数量 |
|---|
| | | function get_Proc() { |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/KB_ProcSum", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | PubRes = res; |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | if (res.data[0][i].HProcID == 191) {//缸厂 |
|---|
| | | //$("#zzp1_2").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_2").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } else |
|---|
| | | if (res.data[0][i].HProcID == 193) {//烘干定型 |
|---|
| | | $("#zzp1_3").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_3").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 194) {//上浆定型 |
|---|
| | | $("#zzp1_4").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_4").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 198) {//色坯烫光 |
|---|
| | | $("#zzp1_5").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_5").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 204) {//预烫剪 |
|---|
| | | $("#zzp1_6").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_6").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 197) {//补刷 |
|---|
| | | $("#zzp1_7").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_7").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 201) {//印毛尖 |
|---|
| | | $("#zzp1_8").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_8").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 200) {//拉幅定型 |
|---|
| | | $("#zzp1_9").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_9").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 206) {//短线烫 |
|---|
| | | $("#zzp1_10").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_10").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 205) {//长线烫 |
|---|
| | | $("#zzp1_11").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_11").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | $("#zzp1_12").text("在制品: " + res.data[0][i].InHQty.toLocaleString());//打包入库 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //打包入库 |
|---|
| | | $("#cps_12").text("产品数: " + res.data[1][0].HQty.toLocaleString()); |
|---|
| | | //染厂在制数量 |
|---|
| | | $("#zzp1_2").text("在制品: " + (res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString())); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //折线图 |
|---|
| | | function get_LineChart(mychart1, mychart3) { |
|---|
| | | |
|---|
| | | //生产效率 |
|---|
| | | var res = PubRes; |
|---|
| | | var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | if (res.data[0][i].HProcID == 191) {//缸厂 |
|---|
| | | optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } else if (res.data[0][i].HProcID == 193) {//烘干定型 |
|---|
| | | optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 194) {//上浆定型 |
|---|
| | | optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 198) {//色坯烫光 |
|---|
| | | optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 204) {//预烫剪 |
|---|
| | | optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 197) {//补刷 |
|---|
| | | optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 201) {//印毛尖 |
|---|
| | | optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 200) {//拉幅定型 |
|---|
| | | optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 206) {//短线烫 |
|---|
| | | optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 205) {//长线烫 |
|---|
| | | optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //打包入库 |
|---|
| | | optionData[10] = (res.data[1][0].HQty / 1000).toFixed(2); |
|---|
| | | |
|---|
| | | var option = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: ['缸染', '烘干定型', '上浆定型', '色坯烫光', '预烫剪', '补刷', '印毛尖', '拉幅定型', '短线烫', '长线烫', '打包入库'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | orient: 'vertical', |
|---|
| | | data: ['12', '43'],//设置线条的名字 |
|---|
| | | right: 0, |
|---|
| | | top: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: '#35d1ed' //设置字体颜色 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 0, |
|---|
| | | color: '#35d1ed', |
|---|
| | | formatter: function (value) { |
|---|
| | | var ret = "";//拼接加\n返回的类目项 |
|---|
| | | var maxLength = 1;//每项显示文字个数 |
|---|
| | | var valLength = value.length;//X轴类目项的文字个数 |
|---|
| | | var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|---|
| | | if (rowN > 1)//如果类目项的文字大于3, |
|---|
| | | { |
|---|
| | | for (var i = 0; i < rowN; i++) { |
|---|
| | | var temp = "";//每次截取的字符串 |
|---|
| | | var start = i * maxLength;//开始截取的位置 |
|---|
| | | var end = start + maxLength;//结束截取的位置 |
|---|
| | | //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|---|
| | | temp = value.substring(start, end) + "\n"; |
|---|
| | | ret += temp; //凭借最终的字符串 |
|---|
| | | } |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '12',//与legend对应 |
|---|
| | | data: optionData, |
|---|
| | | type: 'line', |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | formatter: function (params) { |
|---|
| | | return echarts.format.addCommas(params.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | smooth: true,//smooth属性默认是false false就是直线 true就是曲线 |
|---|
| | | lineStyle: { |
|---|
| | | color: '#44E2F0' |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置线条上点的颜色（和图例的颜色） |
|---|
| | | normal: { |
|---|
| | | color: '#44E2F0', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, areaStyle: {} |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '43', |
|---|
| | | data: [10, 10, 10, 10, 10, 10, 10, 10], |
|---|
| | | type: 'line', |
|---|
| | | smooth: true,//smooth属性默认是false false就是直线 true就是曲线 |
|---|
| | | lineStyle: { |
|---|
| | | color: '#90f083' |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置线条上点的颜色（和图例的颜色） |
|---|
| | | normal: { |
|---|
| | | color: '#90f083', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, areaStyle: {} |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | |
|---|
| | | //生产产量 |
|---|
| | | var dateData = []; |
|---|
| | | var OptionData = []; |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/ProductionOutput", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | dateData.push(res.data[0][i]["HDate"]); |
|---|
| | | OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(2)); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var option2 = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: dateData |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | orient: 'vertical', |
|---|
| | | data: ['千米'],//设置线条的名字 |
|---|
| | | right: 0, |
|---|
| | | top: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: '#35d1ed' //设置字体颜色 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 0, |
|---|
| | | color: '#35d1ed', |
|---|
| | | formatter: function (value) { |
|---|
| | | var ret = "";//拼接加\n返回的类目项 |
|---|
| | | var maxLength = 2;//每项显示文字个数 |
|---|
| | | var valLength = value.length;//X轴类目项的文字个数 |
|---|
| | | var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|---|
| | | if (rowN > 1)//如果类目项的文字大于3, |
|---|
| | | { |
|---|
| | | for (var i = 0; i < rowN; i++) { |
|---|
| | | var temp = "";//每次截取的字符串 |
|---|
| | | var start = i * maxLength;//开始截取的位置 |
|---|
| | | var end = start + maxLength;//结束截取的位置 |
|---|
| | | //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|---|
| | | if (value[i + 1] == "/") { |
|---|
| | | temp = value.substring(i + 1, i + 2) + "\n" + value.substring(i + 2, valLength); |
|---|
| | | ret += temp; |
|---|
| | | return ret; |
|---|
| | | } else { |
|---|
| | | temp = value.substring(start, end) + "\n"; |
|---|
| | | } |
|---|
| | | ret += temp; //凭借最终的字符串 |
|---|
| | | } |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '千米',//与legend对应 |
|---|
| | | data: OptionData, |
|---|
| | | type: 'line', |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | formatter: function (params) { |
|---|
| | | return echarts.format.addCommas(params.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | smooth: true,//smooth属性默认是false false就是直线 true就是曲线 |
|---|
| | | lineStyle: { |
|---|
| | | color: '#44E2F0' //线条颜色 |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置线条上点的颜色（和图例的颜色） |
|---|
| | | normal: { |
|---|
| | | color: '#44E2F0', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | mychart1.setOption(option); |
|---|
| | | mychart3.setOption(option2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //柱状图 |
|---|
| | | function get_Histogram(mychart2) { |
|---|
| | | |
|---|
| | | //生产负荷 |
|---|
| | | var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
|---|
| | | |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/KB_scfh", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | if (res.data[0][i].HProcID == 191) {//缸厂 |
|---|
| | | optionData[0] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } else if (res.data[0][i].HProcID == 193) {//烘干定型 |
|---|
| | | optionData[1] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 194) {//上浆定型 |
|---|
| | | optionData[2] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 198) {//色坯烫光 |
|---|
| | | optionData[3] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 204) {//预烫剪 |
|---|
| | | optionData[4] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 197) {//补刷 |
|---|
| | | optionData[5] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 201) {//印毛尖 |
|---|
| | | optionData[6] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 200) {//拉幅定型 |
|---|
| | | optionData[7] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 206) {//短线烫 |
|---|
| | | optionData[8] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 205) {//长线烫 |
|---|
| | | optionData[9] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var option = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: ['缸染', '烘干定型', '上浆定型', '色坯烫光', '预烫剪', '补刷', '印毛尖', '拉幅定型', '短线烫', '长线烫'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 0, |
|---|
| | | color: '#35d1ed', |
|---|
| | | formatter: function (value) { |
|---|
| | | var ret = "";//拼接加\n返回的类目项 |
|---|
| | | var maxLength = 1;//每项显示文字个数 |
|---|
| | | var valLength = value.length;//X轴类目项的文字个数 |
|---|
| | | var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|---|
| | | if (rowN > 1)//如果类目项的文字大于3, |
|---|
| | | { |
|---|
| | | for (var i = 0; i < rowN; i++) { |
|---|
| | | var temp = "";//每次截取的字符串 |
|---|
| | | var start = i * maxLength;//开始截取的位置 |
|---|
| | | var end = start + maxLength;//结束截取的位置 |
|---|
| | | //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|---|
| | | temp = value.substring(start, end) + "\n"; |
|---|
| | | ret += temp; //凭借最终的字符串 |
|---|
| | | } |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: optionData, |
|---|
| | | type: 'bar', |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | formatter: function (params) { |
|---|
| | | return echarts.format.addCommas(params.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置柱形的颜色 |
|---|
| | | normal: { |
|---|
| | | //color: '#44E2F0', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | mychart2.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //仪表盘 |
|---|
| | | function get_Dashboard(mychart4) { |
|---|
| | | var hgl = 0; |
|---|
| | | var zcl = 0; |
|---|
| | | //制成率 |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/Dashboard", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | hgl = res.data[0][0]["合格率"].toFixed(2); |
|---|
| | | zcl = res.data[1][0]["制成率"].toFixed(2); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var option = { |
|---|
| | | series: [ |
|---|
| | | {//左边仪表盘 |
|---|
| | | // name: '业务指标', |
|---|
| | | type: 'gauge', |
|---|
| | | detail: { |
|---|
| | | formatter: '{value}%', |
|---|
| | | //offsetCenter: ['10', '70%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比 |
|---|
| | | fontSize: 22, //文字的字体大小 |
|---|
| | | offsetCenter: ['20%', '100%'] |
|---|
| | | }, |
|---|
| | | radius: "60%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 |
|---|
| | | center: ["25%", "60%"], |
|---|
| | | startAngle: 235, |
|---|
| | | endAngle: 25, |
|---|
| | | clockWise: true, |
|---|
| | | min: 0, |
|---|
| | | max: 100, |
|---|
| | | splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。 |
|---|
| | | axisTick: { // 刻度(线)样式。 |
|---|
| | | show: true, // 是否显示刻度(线),默认 true。 |
|---|
| | | splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。 |
|---|
| | | length: 15, // 刻度线长。支持相对半径的百分比,默认 8。 |
|---|
| | | lineStyle: { // 刻度线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 1, //线度,默认 1。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
|---|
| | | show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。 |
|---|
| | | lineStyle: { // 仪表盘轴线样式。 |
|---|
| | | // color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] |
|---|
| | | // opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 10, //轴线宽度,默认 30。 |
|---|
| | | // shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { // 分隔线样式。 |
|---|
| | | show: true, // 是否显示分隔线,默认 true。 |
|---|
| | | length: 15, // 分隔线线长。支持相对半径的百分比,默认 30。 |
|---|
| | | lineStyle: { // 分隔线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 2, //线度,默认 2。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | fontSize: 20, |
|---|
| | | color: '#55bcd5',//标题颜色 |
|---|
| | | offsetCenter: ['20%', '60%']//设置完成率位置 |
|---|
| | | }, |
|---|
| | | data: [{ |
|---|
| | | value: zcl, |
|---|
| | | name: '制成率', |
|---|
| | | }], |
|---|
| | | |
|---|
| | | }, |
|---|
| | | {//右仪表盘 |
|---|
| | | // name: '业务指标', |
|---|
| | | type: 'gauge', |
|---|
| | | detail: { |
|---|
| | | formatter: '{value}%', |
|---|
| | | offsetCenter: ['10%', '90%'] |
|---|
| | | }, |
|---|
| | | radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 |
|---|
| | | center: ["70%", "55%"], |
|---|
| | | startAngle: 225,//仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。 |
|---|
| | | endAngle: -45,//仪表盘结束角度 |
|---|
| | | clockWise: true, |
|---|
| | | min: 0, |
|---|
| | | max: 100, |
|---|
| | | splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。 |
|---|
| | | axisTick: { // 刻度(线)样式。 |
|---|
| | | show: true, // 是否显示刻度(线),默认 true。 |
|---|
| | | splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。 |
|---|
| | | length: 15, // 刻度线长。支持相对半径的百分比,默认 8。 |
|---|
| | | lineStyle: { // 刻度线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 1, //线度,默认 1。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
|---|
| | | show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。 |
|---|
| | | lineStyle: { // 仪表盘轴线样式。 |
|---|
| | | // color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] |
|---|
| | | // opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 10, //轴线宽度,默认 30。 |
|---|
| | | // shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { // 分隔线样式。 |
|---|
| | | show: true, // 是否显示分隔线,默认 true。 |
|---|
| | | length: 15, // 分隔线线长。支持相对半径的百分比,默认 30。 |
|---|
| | | lineStyle: { // 分隔线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 2, //线度,默认 2。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | fontSize: 20, |
|---|
| | | color: '#55bcd5',//标题颜色 |
|---|
| | | offsetCenter: ['0', '60%']//设置完成率位置 |
|---|
| | | }, |
|---|
| | | data: [{ |
|---|
| | | value: hgl, |
|---|
| | | name: '合格率', |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | mychart4.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </head> |
|---|
| | | <body class="box"> |
|---|
| | | <div> |
|---|
| | | <div class="tr0"> |
|---|
| | | <div class="col2-1"> |
|---|
| | | <div class="col2-1-p"> |
|---|
| | | <p>宁波科艺绿色皮草集团有限公司</p> |
|---|
| | | </div> |
|---|
| | | <div class="clock"> |
|---|
| | | <ul> |
|---|
| | | <li id="Date"></li> |
|---|
| | | <li id="hours"> </li> |
|---|
| | | <li id="point">:</li> |
|---|
| | | <li id="min"> </li> |
|---|
| | | <li id="point">:</li> |
|---|
| | | <li id="sec"> </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr1"> |
|---|
| | | <div class="col1"> |
|---|
| | | <div class="col1-1"> |
|---|
| | | <p> |
|---|
| | | 当前状态 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2"> |
|---|
| | | <div class="col1-2-j"> |
|---|
| | | <p>计划数量</p> |
|---|
| | | <h2><label id="jh">0</label> </h2> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2-w"> |
|---|
| | | <p>完成数量</p> |
|---|
| | | <h2><label id="wc">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2-z"> |
|---|
| | | <p>在制数量</p> |
|---|
| | | <h2><label id="zz">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2-d"> |
|---|
| | | <p>等待生产</p> |
|---|
| | | <h2><label id="dd">0</label></h2> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2"> |
|---|
| | | <div class="col2-2"> |
|---|
| | | <div class="col2-2-on"> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in"> |
|---|
| | | <div class="col2-2-in-1"> |
|---|
| | | <div class="col2-2-in-1-l"> |
|---|
| | | <p id="zzp1_1">在制品:0</p> |
|---|
| | | <p id="cps_1">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-c"> |
|---|
| | | <p id="zzp1_2">在制品:0</p> |
|---|
| | | <p id="cps_2">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-r"> |
|---|
| | | <p id="zzp1_3">在制品:0</p> |
|---|
| | | <p id="cps_3">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-r2"> |
|---|
| | | <p id="zzp1_4">在制品:0</p> |
|---|
| | | <p id="cps_4">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-r3"> |
|---|
| | | <p id="zzp1_5">在制品:0</p> |
|---|
| | | <p id="cps_5">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2"> |
|---|
| | | <div class="col2-2-in-2-l"> |
|---|
| | | <p>织造</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-c"> |
|---|
| | | <p>缸染</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-r"> |
|---|
| | | <p> |
|---|
| | | 烘干定型 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-r2"> |
|---|
| | | <p> |
|---|
| | | 上浆定型 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-r3"> |
|---|
| | | <p> |
|---|
| | | 色坯烫光 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-3"> |
|---|
| | | <div class="col2-2-in-3-l"> |
|---|
| | | <p id="zzp1_6">在制品:0</p> |
|---|
| | | <p id="cps_6">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-3-r"> |
|---|
| | | <p id="zzp1_7">在制品:0</p> |
|---|
| | | <p id="cps_7">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-3-r2"> |
|---|
| | | <p id="zzp1_8">在制品:0</p> |
|---|
| | | <p id="cps_8">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4"> |
|---|
| | | <div class="col2-2-in-4-l"> |
|---|
| | | <p> |
|---|
| | | 拉幅定型 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4-c"> |
|---|
| | | <p> |
|---|
| | | 短线烫 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4-r"> |
|---|
| | | <p> |
|---|
| | | 长线烫 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4-r2"> |
|---|
| | | <p> |
|---|
| | | 打包入库 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5"> |
|---|
| | | <div class="col2-2-in-5-l"> |
|---|
| | | <p id="zzp1_9">在制品:0</p> |
|---|
| | | <p id="cps_9">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-lc"> |
|---|
| | | <p> |
|---|
| | | 预烫剪 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-c"> |
|---|
| | | <p id="zzp1_10">在制品:0</p> |
|---|
| | | <p id="cps_10">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-cr"> |
|---|
| | | <p>补刷</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-r"> |
|---|
| | | <p id="zzp1_11">在制品:0</p> |
|---|
| | | <p id="cps_11">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-rr2"> |
|---|
| | | <p> |
|---|
| | | 印毛尖 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-r2"> |
|---|
| | | <p id="zzp1_12">在制品:0</p> |
|---|
| | | <p id="cps_12">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col3"> |
|---|
| | | <div class="col3-1"> |
|---|
| | | <p>返工状态</p> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2"> |
|---|
| | | <div class="col3-2-j"> |
|---|
| | | <p>染厂</p> |
|---|
| | | <h2><label id="rc">0</label> </h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-w"> |
|---|
| | | <p>后整一号</p> |
|---|
| | | <h2><label id="hzyh">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-z"> |
|---|
| | | <p>后整二号</p> |
|---|
| | | <h2><label id="hzeh">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-d"> |
|---|
| | | <p>后整三号</p> |
|---|
| | | <h2><label id="hzsh">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-t"> |
|---|
| | | <p>特整</p> |
|---|
| | | <h2><label id="tz">0</label></h2> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2"> |
|---|
| | | <div class="tr2-1"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>生产负荷(km)</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart1"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-2"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>生产效率(km)</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart2"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-3"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>生产产量(km)</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart3"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-4"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>质量指标</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart4"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | |
|---|
| | | <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8" /> |
|---|
| | | <title>全局状况看板</title> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="css/index.css"> |
|---|
| | | <script src="js/jquery.min.js"></script> |
|---|
| | | <script src='js/echarts.min.js'></script> |
|---|
| | | <script src="js/bootstrap.min.js"></script> |
|---|
| | | <script src='js/bootstrap-table.min.js'></script> |
|---|
| | | <script src='js/bootstrap-select.min.js'></script> |
|---|
| | | <script src='js/bootstrap-table-zh-CN.min.js'></script> |
|---|
| | | <script src="js/jquery.SuperSlide.2.1.3.js"></script> |
|---|
| | | <script src='js/template.js'></script> |
|---|
| | | <script src="js/jquery.qrcode.min.js"></script> |
|---|
| | | <script src="js/webConfig.js"></script> |
|---|
| | | <style> |
|---|
| | | /*body { |
|---|
| | | padding-left: 50px; |
|---|
| | | padding-right: 50px; |
|---|
| | | font-family: KaiTi;*/ |
|---|
| | | /*background-color: #031f52;*/ |
|---|
| | | /*}*/ |
|---|
| | | |
|---|
| | | body { |
|---|
| | | font-family: KaiTi; |
|---|
| | | background-image: url(../KanBanUI/img/bj2.jpg); |
|---|
| | | background-size: cover; |
|---|
| | | background-position: center; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | /*background-attachment: fixed;*/ |
|---|
| | | height: 50%; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /*.box:after { |
|---|
| | | content: ""; |
|---|
| | | display: block; |
|---|
| | | position: fixed; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | background: url(../KanBanUI/img/bj2.jpg);*/ /*加载背景图：图片地址 不平铺 */ |
|---|
| | | /*background-size: cover;*/ /* 让背景图基于容器大小伸缩 */ |
|---|
| | | /*background-attachment: fixed;*/ /* background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 |
|---|
| | | scroll 背景图片随着页面的滚动而滚动，这是默认的。 |
|---|
| | | fixed 背景图片不会随着页面的滚动而滚动。 |
|---|
| | | local 背景图片会随着元素内容的滚动而滚动。*/ |
|---|
| | | |
|---|
| | | /*width: 100%; |
|---|
| | | height: 100%;*/ |
|---|
| | | /*opacity: 0.1;*/ |
|---|
| | | /*z-index: -1; |
|---|
| | | }*/ |
|---|
| | | |
|---|
| | | .tr0 { |
|---|
| | | height: 80px; |
|---|
| | | /*background-color: aquamarine;*/ |
|---|
| | | width: 100% |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr1 { |
|---|
| | | height: 600px; |
|---|
| | | /*background-color: aquamarine;*/ |
|---|
| | | width: 100% |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1 { |
|---|
| | | width: 13%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | margin-right: 2%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 7%; |
|---|
| | | /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/ |
|---|
| | | line-height: 300%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-1 p { |
|---|
| | | font-size: 20PX; |
|---|
| | | text-align: center; |
|---|
| | | height: 100%; |
|---|
| | | /*padding-left: 5%;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 93%; |
|---|
| | | font-size: 20px; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2 p { |
|---|
| | | padding-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2 h2 { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-j { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-w { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-z { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col1-2-d { |
|---|
| | | width: 100%; |
|---|
| | | height: 25%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2 { |
|---|
| | | width: 70%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | margin-right: 2%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(25 125 239 / 64%)), color-stop(100%,rgba(125,185,232,0)));*/ |
|---|
| | | /*border:solid 1px #0ddae8*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-1-p { |
|---|
| | | width: 50%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #0d5974;*/ |
|---|
| | | margin: 0 auto; |
|---|
| | | line-height: 100%; |
|---|
| | | padding: 1% 10%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-1-p p { |
|---|
| | | font-size: 32px; |
|---|
| | | text-align: center; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | line-height: 160%; |
|---|
| | | /*background-color: #88ace74d;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #d6bbbb;*/ |
|---|
| | | /*background: url(../KanBanUI/img/bj.png) no-repeat center center;*/ |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 30%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-l { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-l p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-c { |
|---|
| | | width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-c p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r2 { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r3 { |
|---|
| | | width: 18%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 6.5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-1-r3 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 10%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-l { |
|---|
| | | width: 12%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-l p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-c { |
|---|
| | | width: 20%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-c p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r { |
|---|
| | | width: 18%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r2 { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r3 { |
|---|
| | | width: 19%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-2-r3 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3 { |
|---|
| | | width: 100%; |
|---|
| | | height: 29%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 10%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-l { |
|---|
| | | width: 31%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-l p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r { |
|---|
| | | width: 26%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r2 { |
|---|
| | | width: 23%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-3-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4 { |
|---|
| | | width: 100%; |
|---|
| | | height: 5%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-l { |
|---|
| | | width: 15%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-l p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-c { |
|---|
| | | width: 25%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-c p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r2 { |
|---|
| | | width: 23%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*text-align:right*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-4-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5 { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-bottom:2%;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-l { |
|---|
| | | width: 17%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-l p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-lc { |
|---|
| | | width: 10%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-top: 2%;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-lc p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-c { |
|---|
| | | width: 16%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-c p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-cr { |
|---|
| | | width: 9%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-top: 2%;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-cr p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-rr2 { |
|---|
| | | width: 9%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | /*padding-top: 2%;*/ |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-rr2 p { |
|---|
| | | text-align: right; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r { |
|---|
| | | width: 15%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*font-size: 20px;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r2 { |
|---|
| | | width: 14%; |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | padding-top: 5%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col2-2-in-5-r2 p { |
|---|
| | | text-align: right; |
|---|
| | | height: 10px; |
|---|
| | | /*background-color: #93a6b7;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3 { |
|---|
| | | width: 13%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | height: 100%; |
|---|
| | | float: left; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-1 { |
|---|
| | | width: 100%; |
|---|
| | | height: 7%; |
|---|
| | | /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/ |
|---|
| | | line-height: 300%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-1 p { |
|---|
| | | font-size: 20PX; |
|---|
| | | text-align: center; |
|---|
| | | height: 100%; |
|---|
| | | /*padding-left: 5%;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2 { |
|---|
| | | width: 100%; |
|---|
| | | height: 93%; |
|---|
| | | font-size: 20px; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2 p { |
|---|
| | | padding-top: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2 h2 { |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-j { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-w { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-z { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-d { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .col3-2-t { |
|---|
| | | width: 100%; |
|---|
| | | height: 20%; |
|---|
| | | /*background-color: #865454;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2 { |
|---|
| | | height: 300px; |
|---|
| | | /*background-color: #e0dddd;*/ |
|---|
| | | width: 100%; |
|---|
| | | padding-top: 1%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | float: left; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1-on { |
|---|
| | | width: 100%; |
|---|
| | | height: 10%; |
|---|
| | | /*background: linear-gradient(270deg,#196bcb00,#1391ba);*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1-on p { |
|---|
| | | text-align: left; |
|---|
| | | padding-left: 2%; |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-1-in { |
|---|
| | | width: 100%; |
|---|
| | | height: 90%; |
|---|
| | | /*background-color: #c7c5db;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-2 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | float: left; |
|---|
| | | margin-left: 1%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-3 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | float: left; |
|---|
| | | margin-left: 1%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tr2-4 { |
|---|
| | | width: 24%; |
|---|
| | | height: 100%; |
|---|
| | | /*background: rgb(0 104 255 / 23%);*/ |
|---|
| | | float: left; |
|---|
| | | margin-left: 1%; |
|---|
| | | /*border: solid 1px #93c1de;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clock { |
|---|
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
|---|
| | | font-size: 20px; |
|---|
| | | float: right; |
|---|
| | | margin-top: -44px; |
|---|
| | | margin-right: 5px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clock ul { |
|---|
| | | width: 450px; |
|---|
| | | margin: 0 auto; |
|---|
| | | padding: 0px; |
|---|
| | | list-style: none; |
|---|
| | | text-align: right; |
|---|
| | | margin-left: 15px; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .clock ul li { |
|---|
| | | display: inline; |
|---|
| | | font-size: 24px; |
|---|
| | | text-align: left; |
|---|
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
|---|
| | | text-shadow: 0 0 0px #00c6ff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #jh, #wc, #zz, #dd, #rc, #hzsh, #hzyh, #hzeh, #tz { |
|---|
| | | color: #21d5dc |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | $(document).ready(function () { |
|---|
| | | // 创建两个变量，一个数组中的月和日的名称 |
|---|
| | | var monthNames = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]; |
|---|
| | | setInterval(function () { |
|---|
| | | var date1 = new Date; |
|---|
| | | var year = date1.getFullYear(); |
|---|
| | | var month = date1.getMonth(); |
|---|
| | | var day = date1.getDate(); |
|---|
| | | var hh = date1.getHours(); |
|---|
| | | var mm = date1.getMinutes(); |
|---|
| | | var ss = date1.getSeconds(); |
|---|
| | | |
|---|
| | | |
|---|
| | | $('#Date').html(year + "-" + monthNames[month] + '-' + (day < 10 ? "0" + day : day) + " "); |
|---|
| | | $("#hours").html((hh < 10 ? ("0" + hh) : hh)); |
|---|
| | | $("#min").html((mm < 10 ? ("0" + mm) : mm)); |
|---|
| | | $("#sec").html((ss < 10 ? ("0" + ss) : ss)); |
|---|
| | | |
|---|
| | | }, 1000); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | $(function () { |
|---|
| | | var mychart1 = echarts.init(document.getElementById('mychart1')); |
|---|
| | | var mychart2 = echarts.init(document.getElementById('mychart2')); |
|---|
| | | var mychart3 = echarts.init(document.getElementById('mychart3')); |
|---|
| | | var mychart4 = echarts.init(document.getElementById('mychart4')); |
|---|
| | | |
|---|
| | | Chart(mychart1, mychart2, mychart3, mychart4); |
|---|
| | | |
|---|
| | | setInterval(function () { |
|---|
| | | Chart(mychart1, mychart2, mychart3, mychart4); |
|---|
| | | }, 60000); |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | //根据窗口的大小变动图表 --- 重点 |
|---|
| | | window.onresize = function () { |
|---|
| | | mychart1.resize(); |
|---|
| | | mychart2.resize(); |
|---|
| | | mychart3.resize(); |
|---|
| | | mychart4.resize(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }); |
|---|
| | | var PubRes = []; |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | function Chart(mychart1, mychart2, mychart3, mychart4) { |
|---|
| | | //所有工序在制 生产数量 |
|---|
| | | get_Proc(); |
|---|
| | | //当前状态 |
|---|
| | | get_CurrentState(); |
|---|
| | | //折线图 |
|---|
| | | get_LineChart(mychart1, mychart3); |
|---|
| | | //柱状图 |
|---|
| | | get_Histogram(mychart2); |
|---|
| | | //仪表盘 |
|---|
| | | get_Dashboard(mychart4); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //当前状态 |
|---|
| | | function get_CurrentState() { |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/get_CurrentState", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | var HQty = 0.0; |
|---|
| | | for (var i = 0; i < PubRes.data[0].length; i++) { |
|---|
| | | HQty += PubRes.data[0][i].InHQty; |
|---|
| | | } |
|---|
| | | $("#jh").text(res.data[0][0]["HQty"].toLocaleString()); |
|---|
| | | $("#wc").text(res.data[1][0]["HQty"].toLocaleString()); |
|---|
| | | $("#zz").text(HQty.toLocaleString()); |
|---|
| | | $("#dd").text(res.data[2][0]["HQty"].toLocaleString()); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //工序数量 |
|---|
| | | function get_Proc() { |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/KB_ProcSum", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | PubRes = res; |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | if (res.data[0][i].HProcID == 191) {//缸厂 |
|---|
| | | //$("#zzp1_2").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_2").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } else |
|---|
| | | if (res.data[0][i].HProcID == 193) {//烘干定型 |
|---|
| | | $("#zzp1_3").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_3").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 194) {//上浆定型 |
|---|
| | | $("#zzp1_4").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_4").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 198) {//色坯烫光 |
|---|
| | | $("#zzp1_5").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_5").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 204) {//预烫剪 |
|---|
| | | $("#zzp1_6").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_6").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 197) {//补刷 |
|---|
| | | $("#zzp1_7").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_7").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 201) {//印毛尖 |
|---|
| | | $("#zzp1_8").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_8").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 200) {//拉幅定型 |
|---|
| | | $("#zzp1_9").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_9").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 206) {//短线烫 |
|---|
| | | $("#zzp1_10").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_10").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 205) {//长线烫 |
|---|
| | | $("#zzp1_11").text("在制品: " + res.data[0][i].InHQty.toLocaleString()); |
|---|
| | | $("#cps_11").text("产品数: " + res.data[0][i].OutHQty.toLocaleString()); |
|---|
| | | $("#zzp1_12").text("在制品: " + res.data[0][i].InHQty.toLocaleString());//打包入库 |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //打包入库 |
|---|
| | | $("#cps_12").text("产品数: " + res.data[1][0].HQty.toLocaleString()); |
|---|
| | | //染厂在制数量 |
|---|
| | | $("#zzp1_2").text("在制品: " + (res.data[2].length == 0 ? 0 : res.data[2][0].HQty.toLocaleString())); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | //折线图 |
|---|
| | | function get_LineChart(mychart1, mychart3) { |
|---|
| | | |
|---|
| | | //生产效率 |
|---|
| | | var res = PubRes; |
|---|
| | | var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | if (res.data[0][i].HProcID == 191) {//缸厂 |
|---|
| | | optionData[0] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } else if (res.data[0][i].HProcID == 193) {//烘干定型 |
|---|
| | | optionData[1] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 194) {//上浆定型 |
|---|
| | | optionData[2] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 198) {//色坯烫光 |
|---|
| | | optionData[3] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 204) {//预烫剪 |
|---|
| | | optionData[4] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 197) {//补刷 |
|---|
| | | optionData[5] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 201) {//印毛尖 |
|---|
| | | optionData[6] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 200) {//拉幅定型 |
|---|
| | | optionData[7] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 206) {//短线烫 |
|---|
| | | optionData[8] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 205) {//长线烫 |
|---|
| | | optionData[9] = (res.data[0][i].OutHQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | //打包入库 |
|---|
| | | optionData[10] = (res.data[1][0].HQty / 1000).toFixed(2); |
|---|
| | | |
|---|
| | | var option = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: ['缸染', '烘干定型', '上浆定型', '色坯烫光', '预烫剪', '补刷', '印毛尖', '拉幅定型', '短线烫', '长线烫', '打包入库'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | orient: 'vertical', |
|---|
| | | data: ['12', '43'],//设置线条的名字 |
|---|
| | | right: 0, |
|---|
| | | top: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: '#35d1ed' //设置字体颜色 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 0, |
|---|
| | | color: '#35d1ed', |
|---|
| | | formatter: function (value) { |
|---|
| | | var ret = "";//拼接加\n返回的类目项 |
|---|
| | | var maxLength = 1;//每项显示文字个数 |
|---|
| | | var valLength = value.length;//X轴类目项的文字个数 |
|---|
| | | var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|---|
| | | if (rowN > 1)//如果类目项的文字大于3, |
|---|
| | | { |
|---|
| | | for (var i = 0; i < rowN; i++) { |
|---|
| | | var temp = "";//每次截取的字符串 |
|---|
| | | var start = i * maxLength;//开始截取的位置 |
|---|
| | | var end = start + maxLength;//结束截取的位置 |
|---|
| | | //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|---|
| | | temp = value.substring(start, end) + "\n"; |
|---|
| | | ret += temp; //凭借最终的字符串 |
|---|
| | | } |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '12',//与legend对应 |
|---|
| | | data: optionData, |
|---|
| | | type: 'line', |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | formatter: function (params) { |
|---|
| | | return echarts.format.addCommas(params.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | smooth: true,//smooth属性默认是false false就是直线 true就是曲线 |
|---|
| | | lineStyle: { |
|---|
| | | color: '#44E2F0' |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置线条上点的颜色（和图例的颜色） |
|---|
| | | normal: { |
|---|
| | | color: '#44E2F0', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, areaStyle: {} |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '43', |
|---|
| | | data: [10, 10, 10, 10, 10, 10, 10, 10], |
|---|
| | | type: 'line', |
|---|
| | | smooth: true,//smooth属性默认是false false就是直线 true就是曲线 |
|---|
| | | lineStyle: { |
|---|
| | | color: '#90f083' |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置线条上点的颜色（和图例的颜色） |
|---|
| | | normal: { |
|---|
| | | color: '#90f083', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, areaStyle: {} |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | |
|---|
| | | //生产产量 |
|---|
| | | var dateData = []; |
|---|
| | | var OptionData = []; |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/ProductionOutput", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | dateData.push(res.data[0][i]["HDate"]); |
|---|
| | | OptionData.push((res.data[0][i]["HQty"] / 1000).toFixed(2)); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var option2 = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: dateData |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | orient: 'vertical', |
|---|
| | | data: ['千米'],//设置线条的名字 |
|---|
| | | right: 0, |
|---|
| | | top: 15, |
|---|
| | | textStyle: { |
|---|
| | | color: '#35d1ed' //设置字体颜色 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 0, |
|---|
| | | color: '#35d1ed', |
|---|
| | | formatter: function (value) { |
|---|
| | | var ret = "";//拼接加\n返回的类目项 |
|---|
| | | var maxLength = 2;//每项显示文字个数 |
|---|
| | | var valLength = value.length;//X轴类目项的文字个数 |
|---|
| | | var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|---|
| | | if (rowN > 1)//如果类目项的文字大于3, |
|---|
| | | { |
|---|
| | | for (var i = 0; i < rowN; i++) { |
|---|
| | | var temp = "";//每次截取的字符串 |
|---|
| | | var start = i * maxLength;//开始截取的位置 |
|---|
| | | var end = start + maxLength;//结束截取的位置 |
|---|
| | | //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|---|
| | | if (value[i + 1] == "/") { |
|---|
| | | temp = value.substring(i + 1, i + 2) + "\n" + value.substring(i + 2, valLength); |
|---|
| | | ret += temp; |
|---|
| | | return ret; |
|---|
| | | } else { |
|---|
| | | temp = value.substring(start, end) + "\n"; |
|---|
| | | } |
|---|
| | | ret += temp; //凭借最终的字符串 |
|---|
| | | } |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '千米',//与legend对应 |
|---|
| | | data: OptionData, |
|---|
| | | type: 'line', |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | formatter: function (params) { |
|---|
| | | return echarts.format.addCommas(params.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | smooth: true,//smooth属性默认是false false就是直线 true就是曲线 |
|---|
| | | lineStyle: { |
|---|
| | | color: '#44E2F0' //线条颜色 |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置线条上点的颜色（和图例的颜色） |
|---|
| | | normal: { |
|---|
| | | color: '#44E2F0', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | mychart1.setOption(option); |
|---|
| | | mychart3.setOption(option2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //柱状图 |
|---|
| | | function get_Histogram(mychart2) { |
|---|
| | | |
|---|
| | | //生产负荷 |
|---|
| | | var optionData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; |
|---|
| | | |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/KB_scfh", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | |
|---|
| | | for (var i = 0; i < res.data[0].length; i++) { |
|---|
| | | if (res.data[0][i].HProcID == 191) {//缸厂 |
|---|
| | | optionData[0] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } else if (res.data[0][i].HProcID == 193) {//烘干定型 |
|---|
| | | optionData[1] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 194) {//上浆定型 |
|---|
| | | optionData[2] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 198) {//色坯烫光 |
|---|
| | | optionData[3] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 204) {//预烫剪 |
|---|
| | | optionData[4] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 197) {//补刷 |
|---|
| | | optionData[5] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 201) {//印毛尖 |
|---|
| | | optionData[6] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 200) {//拉幅定型 |
|---|
| | | optionData[7] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 206) {//短线烫 |
|---|
| | | optionData[8] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | else if (res.data[0][i].HProcID == 205) {//长线烫 |
|---|
| | | optionData[9] = (res.data[0][i].HQty / 1000).toFixed(2); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var option = { |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: ['缸染', '烘干定型', '上浆定型', '色坯烫光', '预烫剪', '补刷', '印毛尖', '拉幅定型', '短线烫', '长线烫'] |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | show: true, |
|---|
| | | interval: 0, |
|---|
| | | color: '#35d1ed', |
|---|
| | | formatter: function (value) { |
|---|
| | | var ret = "";//拼接加\n返回的类目项 |
|---|
| | | var maxLength = 1;//每项显示文字个数 |
|---|
| | | var valLength = value.length;//X轴类目项的文字个数 |
|---|
| | | var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数 |
|---|
| | | if (rowN > 1)//如果类目项的文字大于3, |
|---|
| | | { |
|---|
| | | for (var i = 0; i < rowN; i++) { |
|---|
| | | var temp = "";//每次截取的字符串 |
|---|
| | | var start = i * maxLength;//开始截取的位置 |
|---|
| | | var end = start + maxLength;//结束截取的位置 |
|---|
| | | //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧 |
|---|
| | | temp = value.substring(start, end) + "\n"; |
|---|
| | | ret += temp; //凭借最终的字符串 |
|---|
| | | } |
|---|
| | | return ret; |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | return value; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | data: optionData, |
|---|
| | | type: 'bar', |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | formatter: function (params) { |
|---|
| | | return echarts.format.addCommas(params.value); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | , itemStyle: { |
|---|
| | | // 设置柱形的颜色 |
|---|
| | | normal: { |
|---|
| | | //color: '#44E2F0', |
|---|
| | | label: { |
|---|
| | | show: true // 在折线拐点上显示数据 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | mychart2.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //仪表盘 |
|---|
| | | function get_Dashboard(mychart4) { |
|---|
| | | var hgl = 0; |
|---|
| | | var zcl = 0; |
|---|
| | | //制成率 |
|---|
| | | $.ajax({ |
|---|
| | | url: GetWEBURL() + "/loaddata/Dashboard", |
|---|
| | | dataType: "JSON", |
|---|
| | | async: false,//使用同步的方式,true为异步方式 |
|---|
| | | type: "Get", |
|---|
| | | data: { "LineCode": "1" }, |
|---|
| | | success: function (res) { |
|---|
| | | hgl = res.data[0][0]["合格率"].toFixed(2); |
|---|
| | | zcl = res.data[1][0]["制成率"].toFixed(2); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | var option = { |
|---|
| | | series: [ |
|---|
| | | {//左边仪表盘 |
|---|
| | | // name: '业务指标', |
|---|
| | | type: 'gauge', |
|---|
| | | detail: { |
|---|
| | | formatter: '{value}%', |
|---|
| | | //offsetCenter: ['10', '70%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比 |
|---|
| | | fontSize: 22, //文字的字体大小 |
|---|
| | | offsetCenter: ['20%', '100%'] |
|---|
| | | }, |
|---|
| | | radius: "60%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 |
|---|
| | | center: ["25%", "60%"], |
|---|
| | | startAngle: 235, |
|---|
| | | endAngle: 25, |
|---|
| | | clockWise: true, |
|---|
| | | min: 0, |
|---|
| | | max: 100, |
|---|
| | | splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。 |
|---|
| | | axisTick: { // 刻度(线)样式。 |
|---|
| | | show: true, // 是否显示刻度(线),默认 true。 |
|---|
| | | splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。 |
|---|
| | | length: 15, // 刻度线长。支持相对半径的百分比,默认 8。 |
|---|
| | | lineStyle: { // 刻度线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 1, //线度,默认 1。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
|---|
| | | show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。 |
|---|
| | | lineStyle: { // 仪表盘轴线样式。 |
|---|
| | | // color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] |
|---|
| | | // opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 10, //轴线宽度,默认 30。 |
|---|
| | | // shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { // 分隔线样式。 |
|---|
| | | show: true, // 是否显示分隔线,默认 true。 |
|---|
| | | length: 15, // 分隔线线长。支持相对半径的百分比,默认 30。 |
|---|
| | | lineStyle: { // 分隔线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 2, //线度,默认 2。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | fontSize: 20, |
|---|
| | | color: '#55bcd5',//标题颜色 |
|---|
| | | offsetCenter: ['20%', '60%']//设置完成率位置 |
|---|
| | | }, |
|---|
| | | data: [{ |
|---|
| | | value: zcl, |
|---|
| | | name: '制成率', |
|---|
| | | }], |
|---|
| | | |
|---|
| | | }, |
|---|
| | | {//右仪表盘 |
|---|
| | | // name: '业务指标', |
|---|
| | | type: 'gauge', |
|---|
| | | detail: { |
|---|
| | | formatter: '{value}%', |
|---|
| | | offsetCenter: ['10%', '90%'] |
|---|
| | | }, |
|---|
| | | radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 |
|---|
| | | center: ["70%", "55%"], |
|---|
| | | startAngle: 225,//仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。 |
|---|
| | | endAngle: -45,//仪表盘结束角度 |
|---|
| | | clockWise: true, |
|---|
| | | min: 0, |
|---|
| | | max: 100, |
|---|
| | | splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。 |
|---|
| | | axisTick: { // 刻度(线)样式。 |
|---|
| | | show: true, // 是否显示刻度(线),默认 true。 |
|---|
| | | splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。 |
|---|
| | | length: 15, // 刻度线长。支持相对半径的百分比,默认 8。 |
|---|
| | | lineStyle: { // 刻度线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 1, //线度,默认 1。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { // 仪表盘轴线(轮廓线)相关配置。 |
|---|
| | | show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。 |
|---|
| | | lineStyle: { // 仪表盘轴线样式。 |
|---|
| | | // color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] |
|---|
| | | // opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 10, //轴线宽度,默认 30。 |
|---|
| | | // shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | splitLine: { // 分隔线样式。 |
|---|
| | | show: true, // 是否显示分隔线,默认 true。 |
|---|
| | | length: 15, // 分隔线线长。支持相对半径的百分比,默认 30。 |
|---|
| | | lineStyle: { // 分隔线样式。 |
|---|
| | | color: "auto", //线的颜色,默认 #eee。 |
|---|
| | | opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|---|
| | | width: 2, //线度,默认 2。 |
|---|
| | | type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
|---|
| | | // shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|---|
| | | // shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | title: { |
|---|
| | | fontSize: 20, |
|---|
| | | color: '#55bcd5',//标题颜色 |
|---|
| | | offsetCenter: ['0', '60%']//设置完成率位置 |
|---|
| | | }, |
|---|
| | | data: [{ |
|---|
| | | value: hgl, |
|---|
| | | name: '合格率', |
|---|
| | | }] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | |
|---|
| | | }; |
|---|
| | | |
|---|
| | | // 使用刚指定的配置项和数据显示图表。 |
|---|
| | | mychart4.setOption(option); |
|---|
| | | } |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </head> |
|---|
| | | <body class="box"> |
|---|
| | | <div> |
|---|
| | | <div class="tr0"> |
|---|
| | | <div class="col2-1"> |
|---|
| | | <div class="col2-1-p"> |
|---|
| | | <p>宁波科艺绿色皮草集团有限公司</p> |
|---|
| | | </div> |
|---|
| | | <div class="clock"> |
|---|
| | | <ul> |
|---|
| | | <li id="Date"></li> |
|---|
| | | <li id="hours"> </li> |
|---|
| | | <li id="point">:</li> |
|---|
| | | <li id="min"> </li> |
|---|
| | | <li id="point">:</li> |
|---|
| | | <li id="sec"> </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr1"> |
|---|
| | | <div class="col1"> |
|---|
| | | <div class="col1-1"> |
|---|
| | | <p> |
|---|
| | | 当前状态 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2"> |
|---|
| | | <div class="col1-2-j"> |
|---|
| | | <p>计划数量</p> |
|---|
| | | <h2><label id="jh">0</label> </h2> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2-w"> |
|---|
| | | <p>完成数量</p> |
|---|
| | | <h2><label id="wc">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2-z"> |
|---|
| | | <p>在制数量</p> |
|---|
| | | <h2><label id="zz">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2-d"> |
|---|
| | | <p>等待生产</p> |
|---|
| | | <h2><label id="dd">0</label></h2> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2"> |
|---|
| | | <div class="col2-2"> |
|---|
| | | <div class="col2-2-on"> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in"> |
|---|
| | | <div class="col2-2-in-1"> |
|---|
| | | <div class="col2-2-in-1-l"> |
|---|
| | | <p id="zzp1_1">在制品:0</p> |
|---|
| | | <p id="cps_1">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-c"> |
|---|
| | | <p id="zzp1_2">在制品:0</p> |
|---|
| | | <p id="cps_2">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-r"> |
|---|
| | | <p id="zzp1_3">在制品:0</p> |
|---|
| | | <p id="cps_3">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-r2"> |
|---|
| | | <p id="zzp1_4">在制品:0</p> |
|---|
| | | <p id="cps_4">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-1-r3"> |
|---|
| | | <p id="zzp1_5">在制品:0</p> |
|---|
| | | <p id="cps_5">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2"> |
|---|
| | | <div class="col2-2-in-2-l"> |
|---|
| | | <p>织造</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-c"> |
|---|
| | | <p>缸染</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-r"> |
|---|
| | | <p> |
|---|
| | | 烘干定型 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-r2"> |
|---|
| | | <p> |
|---|
| | | 上浆定型 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-2-r3"> |
|---|
| | | <p> |
|---|
| | | 色坯烫光 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-3"> |
|---|
| | | <div class="col2-2-in-3-l"> |
|---|
| | | <p id="zzp1_6">在制品:0</p> |
|---|
| | | <p id="cps_6">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-3-r"> |
|---|
| | | <p id="zzp1_7">在制品:0</p> |
|---|
| | | <p id="cps_7">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-3-r2"> |
|---|
| | | <p id="zzp1_8">在制品:0</p> |
|---|
| | | <p id="cps_8">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4"> |
|---|
| | | <div class="col2-2-in-4-l"> |
|---|
| | | <p> |
|---|
| | | 拉幅定型 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4-c"> |
|---|
| | | <p> |
|---|
| | | 短线烫 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4-r"> |
|---|
| | | <p> |
|---|
| | | 长线烫 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-4-r2"> |
|---|
| | | <p> |
|---|
| | | 打包入库 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5"> |
|---|
| | | <div class="col2-2-in-5-l"> |
|---|
| | | <p id="zzp1_9">在制品:0</p> |
|---|
| | | <p id="cps_9">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-lc"> |
|---|
| | | <p> |
|---|
| | | 预烫剪 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-c"> |
|---|
| | | <p id="zzp1_10">在制品:0</p> |
|---|
| | | <p id="cps_10">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-cr"> |
|---|
| | | <p>补刷</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-r"> |
|---|
| | | <p id="zzp1_11">在制品:0</p> |
|---|
| | | <p id="cps_11">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-rr2"> |
|---|
| | | <p> |
|---|
| | | 印毛尖 |
|---|
| | | </p> |
|---|
| | | </div> |
|---|
| | | <div class="col2-2-in-5-r2"> |
|---|
| | | <p id="zzp1_12">在制品:0</p> |
|---|
| | | <p id="cps_12">产品数:0</p> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="col3"> |
|---|
| | | <div class="col3-1"> |
|---|
| | | <p>返工状态</p> |
|---|
| | | </div> |
|---|
| | | <div class="col1-2"> |
|---|
| | | <div class="col3-2-j"> |
|---|
| | | <p>染厂</p> |
|---|
| | | <h2><label id="rc">0</label> </h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-w"> |
|---|
| | | <p>后整一号</p> |
|---|
| | | <h2><label id="hzyh">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-z"> |
|---|
| | | <p>后整二号</p> |
|---|
| | | <h2><label id="hzeh">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-d"> |
|---|
| | | <p>后整三号</p> |
|---|
| | | <h2><label id="hzsh">0</label></h2> |
|---|
| | | </div> |
|---|
| | | <div class="col3-2-t"> |
|---|
| | | <p>特整</p> |
|---|
| | | <h2><label id="tz">0</label></h2> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2"> |
|---|
| | | <div class="tr2-1"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>生产负荷(km)</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart1"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-2"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>生产效率(km)</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart2"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-3"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>生产产量(km)</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart3"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-4"> |
|---|
| | | <div class="tr2-1-on"> |
|---|
| | | <p>质量指标</p> |
|---|
| | | </div> |
|---|
| | | <div class="tr2-1-in" id="mychart4"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
