init

css/1.css

@@ -0,0 +1,684 @@
+/*疫苗开始*/
+.wrapper .msg-tab-head{
+	background-color:#0E1E51;
+	width:100%;
+	padding:10px 40px; 
+	height:100px;
+	color:#898a90;
+	display: flex;
+	flex:1;
+    justify-content:space-around;
+	flex-wrap:nowrap;
+}
+.wrapper .msg-tab-body{
+	height:calc(100% - 100px);
+	padding:5px;
+	padding-bottom:0;
+}
+.msg-list-content{
+	height:100%;
+	overflow:hidden;
+	display:none;
+	width:100%;
+}
+.msg-list-content .list-container{
+	height:100%;
+	display:flex;
+	flex-direction:column;
+	width:100%;
+}
+.msg-tab-body .msg-list-content.active{
+	display:block;
+}
+.msg-tab-body .msg-tab-list{
+	height:30px;
+	display: flex;
+    align-items: center;
+    justify-content: space-between;
+	flex-wrap:nowrap;
+	color:#a4cfe5;
+	width:100%;
+	margin-bottom:3px;
+}
+.msg-tab-body .msg-tab-list .man-dothis{
+	font-size:0.8em;
+	background-color:#060B2E;
+	border-radius:5px;
+	width:55px;
+	height:100%;
+	display: flex;
+    align-items: center;
+	justify-content: center;
+}
+.msg-tab-body .msg-tab-list .this-info{
+	width:60px;
+	height:100%;
+	padding:0 4px;
+	text-align:center;
+}
+.msg-tab-body .msg-tab-list .blank-info{
+	width:4px;
+}
+.msg-tab-body .msg-tab-list .plan-obj{
+	font-size:0.8em;
+	background-color:#060B2E;
+	border-radius:5px;
+	height:100%;
+	display: flex;
+    align-items: center;
+	justify-content: center;
+}
+.msg-tab-body .msg-tab-list .this-content-box{
+	flex:1;
+	height:100%;
+}
+.msg-tab-body .msg-tab-list .this-content{
+	font-size:0.8em;
+	display:flex;
+	align-items:center;
+	background-color:#060B2E;
+	border-radius:5px;
+	padding-left:3px;
+	height:100%;
+	position:relative;
+	padding-right:60px;
+}
+.msg-tab-body .msg-tab-list .this-content.finish-over{
+	padding-right:75px;
+}
+.msg-tab-body .msg-tab-list .this-content .msg-content{
+	
+	display: -webkit-box;
+-webkit-box-orient: vertical;
+-webkit-line-clamp: 1;
+overflow: hidden;
+	line-height:30px;
+	height:100%;
+}
+td .todo-btn,td .ready-todo-btn,td .confirmready-todo-btn{
+	padding:10px;
+}
+
+.msg-tab-body .msg-tab-list .this-content .ypsqxq-btn,.msg-tab-body .msg-tab-list .this-content .ypsqsh-btn,.msg-tab-body .msg-tab-list .this-content .cureinfo-btn,.msg-tab-body .msg-tab-list .this-content .cure-btn,.msg-tab-body .msg-tab-list .this-content .zhenduan-btn,.msg-tab-body .msg-tab-list .this-content .todo-btn,.msg-tab-body .msg-tab-list .this-content .ready-todo-btn,.msg-tab-body .msg-tab-list .this-content .confirmready-todo-btn{
+	position:absolute;
+	right:5px;
+	top:0px;
+	display:flex;
+	align-items:center;
+	height:100%;
+	color:#53BAFD;
+	cursor:pointer;
+	width:60px;
+	justify-content:center;
+}
+.msg-tab-body .msg-tab-list .this-content .finish-time{
+	position:absolute;
+	right:5px;
+	top:0px;
+	display:flex;
+	align-items:center;
+	height:100%;
+	cursor:pointer;
+	width:75px;
+	justify-content:center;
+}
+.msg-tab-body .msg-list-content .list-content-block{
+	position:relative;
+	flex:1;
+	height:33.33%;
+	width:100%;
+	padding-bottom:4px;
+}
+.msg-tab-list-head{
+	height:35px;
+	
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	position:relative;
+	background-color:#060B2E;
+	border-radius:5px;
+	margin-bottom:5px;
+}
+.open-all-plan-list{
+	position:absolute;
+	right:10px;
+	height:100%;
+	display:flex;
+	align-items:center;
+	font-size:12px;
+	color:#53BAFD;
+	cursor:pointer;
+}
+.msg-tab-list-content{
+	height:calc(100% - 40px);
+	overflow:hidden;
+	width:100%;
+}
+.msg-tab-body .list-content-block:before{
+	content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 10%;
+    height: 2px;
+    width: 80%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+.msg-tab-head .msg-tab1{
+	display: flex;
+    flex-direction: column;
+	cursor:pointer;
+	align-items:center;
+	justify-content:center;
+}
+.msg-tab-head .msg-tab1:nth-child(1) img{
+	width:42px;
+}
+.msg-tab-head .msg-tab1:nth-child(2) img{
+	width:55px;
+}
+.msg-tab-head .msg-tab1:nth-child(3) img{
+	width:27px;
+}
+.msg-tab-head .msg-tab1:nth-child(4) img{
+	width:64px;
+}
+.msg-tab-head .msg-tab1 span{
+	line-height:30px;
+	text-align:center;
+	font-size:1.2em;
+}
+.msg-tab-head .msg-tab1.active span{
+	color:#fff;
+}
+
+.right #details-form{
+	position:fixed;
+	top:100px;
+	left:50%;
+	transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+	display:none;
+	z-index:99;
+	background-color: #001346;
+    border-radius: 6px;
+    box-shadow: 0px -5px 5px 0px rgba(255,255,255,0.1), -5px 0px 5px 0px rgba(255,255,255,0.1), 5px 0px 5px 0px rgba(255,255,255,0.1), 0px 5px 5px 0px rgba(255,255,255,0.1);
+}
+#details-form .detail-content{
+	width:100%;
+	height:100%;
+}
+#details-form .detail-content .table-myjh{
+	display:none;
+	height:423px;
+}
+#details-form .detail-content .table-myjh.active{
+	display:block;
+}
+#details-form .detail-content .table-myjh .tab-table-myjh-head{
+	height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2em;
+    color: #53BAFD;
+    position: relative;
+}
+.tab-table-myjh-head:before{
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 5%;
+    height: 2px;
+    width: 90%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+#details-form .tab-table-myjh-body{
+	padding:10px;
+	height:calc(100% - 40px);
+	position:relative;
+}
+#details-form .table-area-head{
+ margin-bottom:5px;
+ width:100%;
+ display:flex;
+ align-items:center;
+ background-color:#133795;
+ height: 43px;
+ border-radius: 5px;
+}
+#details-form .table-myjh .table-area-head .table-area-head-tab{
+ color: #fff;
+ text-align:center;
+ height:30px;
+ vertical-align:middle;
+width:100px;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+}
+#details-form .table-area{
+ width:100%;
+ padding:10px;
+ padding-top:0px;
+ position:absolute;
+ top:58px;
+ left:0;
+ height:calc(100% - 58px);
+ overflow:hidden;
+ border-radius: 0 0 5px 5px;
+}
+#details-form .table-area .table-area-box{
+	height:100%;
+	
+}
+#details-form .table-myjh .table-content{
+ width:100%;
+ height:100%;
+ overflow:hidden;
+}
+#details-form .table-myjh .table-content tr{
+ border-top: 1px solid #09153d;
+}
+#details-form .table-myjh .table-content tr td{
+   text-align: center;
+    height: 39px;
+    vertical-align: middle;
+    padding: 0 3px;
+    background-color: #0c1f59;
+    color: #fff;
+}
+#details-form .table-myjh .table-content tr td{
+	 width:100px;
+}
+#details-form .table-myjh .table-content tr td{
+	font-size:0.9em;
+}
+#details-form .table-myjh:nth-child(1) .table-content tr td:last-child,#details-form .table-myjh:nth-child(2) .table-content tr td:last-child{
+	color:#53BAFD;
+	cursor:pointer;
+}
+#confirm-plan-window,#check-plan-window,#finalcheck-plan-window,#diagnose-window,.cure-window{
+	width:350px;
+	position:fixed;
+	display:none;
+	top:140px;
+	left:50%;
+	transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+	z-index:100;
+	background-color: #001346;
+    border-radius: 6px;
+	
+    box-shadow: 0px -5px 5px 0px rgba(255,255,255,0.1), -5px 0px 5px 0px rgba(255,255,255,0.1), 5px 0px 5px 0px rgba(255,255,255,0.1), 0px 5px 5px 0px rgba(255,255,255,0.1);
+}
+#diagnose-window,.cure-window{
+	width:520px;
+}
+.window-head{
+	height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    color: #53BAFD;
+    position: relative;
+}
+.window-head:before {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 5%;
+    height: 1px;
+    width: 90%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+.window-body{
+	display:flex;
+	flex-direction:column;
+	padding:10px;
+	max-height:800px;
+}
+#confirm-plan-window .window-body .plan-items,.plan-items1{
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	height:30px;
+}
+#check-plan-window .window-body .check-items,#finalcheck-plan-window .window-body .check-items,#diagnose-window .window-body .diagnose-items,.cure-window .window-body .cure-items{
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	margin-bottom:13px;
+}
+#diagnose-window .window-body .diagnose-items .drug-items,.cure-window .window-body .cure-items .drug-items{
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	margin-bottom:13px;
+	width:100%;
+	flex-direction:column;
+	position:relative;
+	padding-bottom:20px;
+}
+#diagnose-window .window-body .diagnose-items .drug-items:first-child,.cure-window .window-body .cure-items .drug-items:first-child{
+	padding-bottom:0px;
+}
+.cut-items{
+	position:absolute;
+	right:0px;
+	bottom:0px;
+	cursor:pointer;
+	display:flex;
+	align-items:center;
+	height:20px;
+}
+.cut-items:hover{
+	color:#53BAFD;
+}
+.icon-cut{
+	background-position:-428px -97px;
+	margin-right:5px;
+}
+#diagnose-window .window-body .diagnose-items,.cure-window .window-body .cure-items{
+	position:relative;
+}
+#diagnose-window .window-body .diagnose-items .add-items,.cure-window .window-body .cure-items .add-items{
+	position:absolute;
+	right:3px;
+	top:50%;
+	transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+}
+.icon-add{
+	background-position: -408px -97px;
+}
+#check-plan-window .window-body .check-items .check-items-title,#finalcheck-plan-window .window-body .check-items .check-items-title{
+	font-size:0.8em;
+	width:90px;
+	text-align:right
+}
+#diagnose-window .window-body .diagnose-items .diagnose-items-title,.cure-window .window-body .cure-items .cure-items-title{
+	font-size:0.8em;
+}
+
+#diagnose-window .window-body .diagnose-items input[type="text"],.cure-items-data input[type="text"],.cure-window .window-body .cure-items input[type="text"]{
+	outline:none;
+	background-color:#001346;
+	border:1px solid #0b52e0;
+	color:#fff;
+	margin-bottom:0px;
+	width:100%;
+	height:26px;
+}
+.cure-items-data input[type="text"]{
+	width:70% !important;
+	margin-left:20px;
+	height:28px !important;
+}
+.flex-end{
+	justify-content:flex-end !important;
+	
+}
+.flex-end label{
+	cursor:pointer;
+}
+.flex-end input{
+	cursor:pointer;
+}
+#check-plan-window .window-body .check-items textarea,#finalcheck-plan-window .window-body .check-items textarea{
+	outline:none;
+	resize:none
+}
+.shenhe-beizhu{
+	margin-left:0px !important;
+	width:80% !important;
+}
+.window-btn{
+	width: 103px;
+    height: 27px;
+    font-size: 0.8em;
+    text-align: center;
+    line-height: 27px;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 16px;
+    color: #fff;
+    cursor: pointer;
+}
+input.btn-qr{
+	background-color:#53BAFD;
+	margin-right:20px;
+}
+.btn-ypsq{
+	background-color:#49bf8e;
+
+}
+.btn-yes,.btn-tg{
+	background-color:#53BAFD;
+	margin-right:20px;
+}
+.btn-no,.btn-bh{
+	background-color:#cc503d;
+	
+}
+#confirm-plan-window .window-body .plan-items-title{
+	font-size:0.8em;
+	width:90px;
+	text-align:right
+}
+#diagnose-window .window-body .diagnose-items-data,.cure-window .window-body .cure-items-data{
+	width:80%;
+	font-size:0.8em;
+	display:flex;
+	align-items:center;
+}
+.cure-items-data .chuli-style-block{
+	display:flex;
+	align-items:center;
+	width:100%;
+	flex-direction:column;
+	border:1px solid #0b52e0;
+	font-size: 1em;
+	border-radius:3px;
+	padding:7px;
+}
+.chuli-style-block .binli-time{
+	height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    position: relative;
+	width:100%;
+}
+.chuli-style-block .binli-time:before{
+	content: '';
+    position: absolute;
+    bottom: 2px;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+.cure-items-data .chuli-style-block .chuli1{
+	width:100%;
+	display:flex;
+	align-items:flex-start;
+	margin-bottom:5px;
+}
+.cure-items-data .chuli-style-block .chuli1:last-child{
+	margin-bottom:0px;
+}
+.chuli-style-block .chuli1 .chuli-way{
+	width:10%;
+	color:#53BAFD
+}
+.chuli-style-block .chuli1 .chuli-content{
+	width:90%;
+	display: -webkit-box;
+-webkit-box-orient: vertical;
+-webkit-line-clamp: 3;
+overflow: hidden;
+}
+#diagnose-window .window-body .diagnose-chuli-block,.cure-window .window-body .cure-chuli-block{
+	width:80%;
+	padding:7px;
+	font-size:0.8em;
+	display:flex;
+	align-items:center;
+	border:1px solid #0b52e0;
+	border-radius:3px;
+	flex-direction:column;
+}
+#diagnose-window .window-body .diagnose-chuli-block .diagnose-chuli-block-item,.cure-window .window-body .cure-chuli-block .cure-chuli-block-item{
+	display:flex;
+	align-items:center;
+	justify-content:space-between;
+	margin-bottom:10px;
+	width:100%;
+}
+#diagnose-window .window-body .diagnose-chuli-block .diagnose-chuli-block-item:last-child,.cure-window .window-body .cure-chuli-block .cure-chuli-block-item:last-child{
+	margin-bottom:0px;
+}
+#confirm-plan-window .window-body .plan-items-data{
+	width:50%;
+	font-size:0.8em;
+	display:flex;
+	align-items:center;
+}
+#confirm-plan-window .window-body .plan-items .plan-items-data .data-nums{
+	flex:1;
+	text-align:center;
+}
+
+.plan-items-data .select ,.diagnose-chuli-block .select,.cure-items .select{
+	flex:1;
+   
+    position: relative;
+    vertical-align: middle;
+    padding: 2px;
+    overflow: hidden;
+    background-color: #001346;
+    color: #fff;
+    text-shadow: none;
+    border-radius: 4px;
+    transition: box-shadow 0.25s ease;
+   
+    z-index: 2;
+    display: flex;
+    align-items: center;
+}
+.cure-items .cure-status{
+	flex:1;
+	display: flex;
+    align-items: center;
+	border:1px solid #0b52e0;
+	justify-content:center;
+	height:28px;
+	border-radius: 4px;
+}
+.cure-items .cure-beizhu{
+	display: flex;
+    align-items: center;
+	width: 70% ;
+    margin-left: 20px;
+	padding-left:5px;
+    height: 28px ;
+	border-radius: 4px;
+	border:1px solid #0b52e0;
+}
+.diagnose-chuli-block .select,.cure-items .select{
+	border:1px solid #0b52e0;
+}
+.diagnose-chuli-block .diagnose-chuli-block-item:nth-child(1) input,.cure-chuli-block .cure-chuli-block-item:nth-child(1) input{
+	width:50px !important;
+	height:100%;
+}
+.diagnose-chuli-block .use-how,.cure-chuli-block .use-how{
+	flex:1;
+	
+}
+.diagnose-chuli-block .use-how input{
+	width:100%;
+}
+.chuli-block-item-title{
+	margin-left:5px;
+}
+.plan-items-data input{
+	height:27px;
+}
+.plan-items-data .select:before ,.diagnose-chuli-block .select:before,.cure-items .select:before{
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: #fff;
+    top: 12px;
+    right: 4px;
+    cursor: pointer;
+    z-index: -2;
+}
+.plan-items-data .select select ,.diagnose-chuli-block .select select,.cure-items .select select {
+    cursor: pointer;
+    padding: 3px 0px;
+    width: 100%;
+    border: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    outline: none;
+    text-align: center;
+    color: #fff;
+	padding-right:20px;
+    font-size: 1em;
+	text-align:center;
+	text-align-last: center;
+	
+}
+.plan-items-data .select option ,.diagnose-chuli-block .select option,.cure-items .select option{
+    background-color: #001346;
+	text-align:center;
+	text-align-last: center;
+}
+.plan-items-data .datetimePicker {
+    flex: 1;
+    border-radius: 4px;
+    transition: box-shadow 0.25s ease;
+    font-size: 0;
+    white-space: nowrap;
+    display: flex;
+    justify-content: space-between;
+}
+.plan-items:last-child{
+	margin-top:10px;
+}
+.plan-items-data .confirs-btn {
+    width: 103px;
+    height: 27px;
+    font-size: 1em;
+    text-align: center;
+    line-height: 27px;
+    -webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 16px;
+    background-color: #ea8c29;
+    color: #fff;
+    cursor: pointer;
+}
+#changedate{
+	height:30px;
+	display:none;
+}
+/*疫苗结束*/

css/common.css

@@ -0,0 +1,205 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 14px;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+* {
+    box-sizing: border-box;
+}
+a {
+    text-decoration: unset;
+}
+html, body {
+  background-color: #060B2E;
+  height: 100%;
+  width: 100%; 
+  min-width:1920px;
+  min-height:1080px;
+ }
+.header-wrapper {
+  display: flex;
+  justify-content: center;
+  background-color: #08133D; 
+  position:relative;
+ }
+.header-wrapper:hover .nav-bar {
+   top:0px;
+	
+}
+.header-wrapper .title {
+    text-align: center;
+    line-height: 80px;
+    font-size: 2.6em;
+    color: #69F8FE;
+	position:relative;
+	width:623px
+}
+.header-wrapper .title svg{
+	position:absolute;
+	left:-140px;
+	top:-2px;
+}
+.header-wrapper .title:after{
+	content:'';
+	width:100%;
+	height:2px;
+	background-color:#fff;
+	position:absolute;
+	bottom:-10px;
+	left:0px;
+}
+
+ .nav-bar {
+  position: absolute;
+  left: 0;
+  top: -90px;
+  height: 90px;
+  background-color: #0E1E51;
+  transition: top 0.75s;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  width:100%;
+ }
+.login-content{
+	 position:absolute;
+	 right:50px;
+	 top:0;
+	 height:100%;
+	display:flex;
+	align-items:center;
+ }
+.login-content .login-href{
+	color:#fff;
+	cursor:pointer;
+	margin-right:30px;
+}
+.login-content .logout-href{
+	color:#fff;
+	cursor:pointer;
+	margin-right:30px;
+}
+.login-content .select-input{
+	min-width:80px;
+	max-width:300px;
+    height: 32px;
+    position: relative;
+    vertical-align: middle;
+    padding: 2px;
+    background-color: #001346;
+    color: #fff;
+    text-shadow: none;
+    border-radius: 4px;
+    transition: box-shadow 0.25s ease;
+    border: 1px solid #0b52e0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+	padding-right: 20px;
+}
+.login-content .select-input:before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: #fff;
+    top: 12px;
+    right: 4px;
+    cursor: pointer;
+    z-index: -2;
+}
+.login-content .select-input .muchang-list{
+	position:absolute;
+	left:0px;
+	top:100%;
+	width:100%;
+	display:none;
+	background-color: #001346;
+    border-radius: 0 0 6px 6px;
+    box-shadow: 0px -5px 5px 0px rgba(255,255,255,0.1), -5px 0px 5px 0px rgba(255,255,255,0.1), 5px 0px 5px 0px rgba(255,255,255,0.1), 0px 5px 5px 0px rgba(255,255,255,0.1);
+}
+.login-content .select-input .muchang-list li{
+	text-align:center;
+	height:30px;
+	line-height:30px;
+	cursor:pointer;
+	padding:0 10px;
+}
+.login-content .select-input .muchang-list li:hover{
+	background-color:#528DFF
+}
+.login-content .select-input .muchang-title{
+	width:100%;
+	height:100%;
+	padding-left: 10px;
+	color: #fff;
+	display:flex;
+	align-items:center;
+	font-size:0.9em;
+	cursor:pointer;
+}
+
+  .nav-bar .item {
+    cursor: pointer;
+    padding: 10px 30px;
+    color: #ffffff;
+    font-size: 22px;
+    border-right: 2px solid transparent;
+    border-image: linear-gradient(0, #0A214A, #6DDFE9, #0A214A) 1; 
+}
+ .nav-bar .item:last-child {
+    border-right: 0; 
+	}
+ .nav-bar .item.active {
+    /*color: #6DDFE9; */
+	background: linear-gradient(to top, #69F8FE,#f4f4f4);
+    -webkit-background-clip: text;
+    color: transparent;
+	font-weight:bold;
+}
+
+ 

css/fzfx.css

@@ -0,0 +1,668 @@
+.grid-wrapper {
+  color: #ffffff;
+  padding: 23px 16px 16px;
+  height: calc(100% - 94px);
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-areas: "left center right" "left bottom bottom"; }
+/*.grid-wrapper > div {
+    overflow: hidden;
+    background-color: #001346;
+    padding: 4px; 
+}*/
+.grid-wrapper > div .wrapper {
+    border-radius: 6px;
+    height: 100%;
+	background-color: #001346;
+	overflow: hidden;
+}
+.grid-wrapper > div .tab-t {
+    padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #0f215c; 
+}
+.grid-wrapper .tab-t>.tab-title {
+    font-size: 1.5em;
+    position: relative;
+}
+.grid-wrapper .tab-t>.tab-title:before {
+	content:"";
+	position:absolute;
+	left:-1.5em;
+	top:50%;
+	width: 0.5em;
+	height: 0.5em;
+	border:2px solid #6DDFE9;
+	transform:rotate(45deg) translateY(-50%);
+-ms-transform:rotate(45deg) translateY(-50%); 	/* IE 9 */
+-moz-transform:rotate(45deg) translateY(-50%); 	/* Firefox */
+-webkit-transform:rotate(45deg) translateY(-50%); /* Safari 和 Chrome */
+-o-transform:rotate(45deg) translateY(-50%); 	/* Opera */
+
+}
+.grid-wrapper .left {
+    grid-area: left; 
+}
+.grid-wrapper .left .left-side-bar{
+	position:relative;
+}
+.left .left-side-table{
+	position:absolute;
+	bottom:0px;
+	left:0px;
+	width:100%;
+	padding:20px 5%;
+	background-color: #001346;
+	height:calc(56% - 40px);
+	display:none
+}
+#table-clfb th{
+	color:#6DDFE9
+}
+#table-clfb tr,#table-clfb td,#table-clfb th{
+	height:33px;
+	vertical-align:middle;
+	border:1px solid #528DFF
+}
+#table-clfb tr td{
+	text-align:center
+	
+}
+.grid-wrapper .left .calendar{
+	height:calc(44% - 40px);
+}
+.grid-wrapper .left .calendar .tabs {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 58px;
+    border-bottom: 3px solid transparent;
+    border-image: linear-gradient(-90deg, #0A214A, #6DDFE9, #0A214A) 10; 
+}
+.grid-wrapper .left .calendar .tabs .tab {
+    cursor: pointer;
+    font-size: 1.4em;
+    color: #A5ACA4; 
+}
+.grid-wrapper .left .calendar .tabs .tab.active {
+    color: #6DDFE9; 
+}
+.grid-wrapper .left .calendar #calendarWrapper .calendar-wrapper {
+    display: none; 
+}
+.grid-wrapper #chartLeft1{
+	height:25%;
+}
+.grid-wrapper #chartLeft2{
+	height:31%;
+}
+#chart-clfb,#chart-tcqk{
+	height:calc(100% - 40px);
+}
+.grid-wrapper .chart-tab-t{
+	padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title{
+	font-size: 1em;
+    position: relative;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+.grid-wrapper .center {
+    grid-area: center; 
+}
+.grid-wrapper .center .line1 {
+    font-size: 1.4em;
+    height: 40px;
+    display: flex;
+    align-items: center; 
+}
+.grid-wrapper .center .line1 .division {
+    flex: 1;
+    height: 2px; 
+	background-color:#528DFF;
+}
+.grid-wrapper .center .line1 .cont {
+    margin: 1px 20px; 
+}
+.grid-wrapper .center .line1 img {
+    width: 30px; 
+}
+.grid-wrapper .center .line2 {
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+	position:relative;
+	padding-bottom:20px;
+	height:98px;
+}
+.grid-wrapper .center .line2:before{
+	content:'';
+	position:absolute;
+	bottom:0px;
+	left:10%;
+	height:3px;
+	width:80%;
+	background: linear-gradient(to right, rgba(105,248,254,0), #6DDFE9, rgba(105,248,254,0));
+}
+
+.grid-wrapper .center .line2 .wait-finish{
+	margin-right: 30px; 
+}
+.grid-wrapper .center .line2 .wait-finish .wait-do{
+	text-align:center;
+}
+.grid-wrapper .center .line2 img {
+    width: 50px;
+
+}
+.grid-wrapper .center .line2 .cross-line{
+	width:1px;
+	height:60px;
+	background-color:#6DDFE9;
+}
+.grid-wrapper .center .line2 .list {
+    overflow:hidden;
+	height:100%;
+	max-width:60%;
+    padding-left: 30px;
+}
+.grid-wrapper .center .line2 .list .item {
+	overflow:hidden;
+    height: 26px;
+    line-height: 26px;
+	text-overflow:ellipsis;
+	white-space: nowrap;	
+}
+.grid-wrapper .center .line2 .list .item .title {
+    color: #6DDFE9; 
+}
+.grid-wrapper .line3{
+	margin-top:10px;
+	height:calc(100% - 148px);
+}
+#chartCenter{
+	height:100%;
+}
+#chart-ydfscts{
+	height: calc(100% - 40px);
+}
+.grid-wrapper .right {
+    grid-area: right; 
+}
+.right .charts-content{
+	height:calc(100% - 40px);
+}
+#chartRight1{
+	height:45%;
+}
+#chart-ttfb{
+	height:calc(100% - 40px);
+}
+#chartRight2{
+	height:55%;
+}
+#chart-ydttsl{
+	height:calc(100% - 40px);
+}
+.grid-wrapper .bottom {
+    grid-area: bottom; 
+}
+/*
+.grid-wrapper .bottom .wrapper {
+    display: flex;
+    flex-direction: column; 
+}*/
+.grid-wrapper .bottom .wrapper .chartBlock {
+    display: flex;
+    height:calc(100% - 40px);
+}
+.grid-wrapper .bottom .wrapper .chartBlock > #chartBottom1 ,.grid-wrapper .bottom .wrapper .chartBlock > #chartBottom2{
+    height: 100%;
+    flex: 1;
+	display: flex;
+    flex-direction: column; 
+}
+.grid-wrapper .bottom .wrapper .chartBlock > #chartBottom1{
+	position:relative;
+}
+#chartBottom1 .choosebtn{
+	position:absolute;
+	right:1em;
+	top:0;
+	z-index:99;
+}
+.grid-wrapper .bottom .wrapper .chartBlock > #chartBottom1 .choosepc{
+	cursor:pointer;
+	font-size: 1.2em;
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+#chartBottom1 .choosepc .choose-item{
+	margin-right:10px;
+}
+#chartBottom1 .choosebtn .choosebox{
+	display:none;
+	width:180px;
+	padding:15px;
+	position:absolute;
+	top:40px;
+	right:0;
+	border:1px solid #3bb3e0;
+	background-color:#001346;
+}
+#chartBottom1 .choosebtn .choosebox .box-btns{
+	display: flex;
+	flex:1;
+    justify-content:space-around;
+}
+
+.a_demo_two {
+	background-color:#3bb3e0;
+	padding:10px 15px;
+	position:relative;
+	font-family: 'Open Sans', sans-serif;
+	font-size:12px;
+	text-decoration:none;
+	color:#fff;
+	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -webkit-gradient(
+	linear,
+	left bottom,
+	left top,
+	color-stop(0, rgb(44,160,202)),
+	color-stop(1, rgb(62,184,229))
+	);
+	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	-o-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.a_demo_two::before {
+	background-color:#072239;
+	content:"";
+	display:block;
+	position:absolute;
+	width:100%;
+	height:100%;
+	padding-left:2px;
+	padding-right:2px;
+	padding-bottom:4px;
+	left:-2px;
+	top:5px;
+	z-index:-1;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	-o-border-radius: 6px;
+	border-radius: 6px;
+}
+
+.a_demo_two:active {
+	color:#156785;
+	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
+	background:rgb(44,160,202);
+	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	top:3px;
+}
+
+.a_demo_two:active::before {
+	top:-2px;
+}
+.switch-bt-active{
+	color: #156785;
+    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
+    background: rgb(44,160,202);
+    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    top:3px;
+
+}
+.choosebox .tab-areas{
+	height:130px;
+	padding-top:20px;
+}
+#tab-area1,#tab-area2{
+	height:100%;
+	
+}
+#tab-area1 .pc-nums{
+	height:100%;
+	overflow:hidden;
+	background-color:#fff;
+}
+#tab-area1 .pc-nums .item{
+	overflow:hidden;
+    height: 28px;
+    line-height: 28px;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	color:#333;
+	padding-left:5px;
+	cursor:pointer;
+	
+}
+#tab-area1 .pc-nums .item:hover{
+	background-color:#9de5f5;
+	color:#fff
+}
+
+.tabshow{
+	display:none !important;
+}
+#tab-area2{
+	display: flex;
+	flex:1;
+    justify-content:space-around;
+}
+#tab-area2 .select{
+	display: inline-block;
+	width: 45%;
+	height:28px;
+	position: relative;
+	vertical-align: middle;
+	padding: 2px;
+	overflow: hidden;
+	background-color: #fff;
+	color: #555;
+	text-shadow: none;
+	border-radius: 4px;	
+	transition: box-shadow 0.25s ease;
+	z-index: 2;
+}
+#tab-area2 .select-list{
+	width: 45%;
+	height:100%;
+	overflow:hidden;
+	background-color:#fff;
+}
+#tab-area2 .select-list .item{
+	overflow:hidden;
+    height: 28px;
+    line-height: 28px;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	color:#333;
+	padding-left:5px;
+	cursor:pointer;
+	
+}
+#tab-area2 .select-list .item:hover{
+	background-color:#9de5f5;
+	color:#fff
+}
+#tab-area2 .select:hover {
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+ 
+#tab-area2 .select:before {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border: 3px solid transparent;
+	border-top-color: #ccc;
+	top: 12px;
+	right: 4px;
+	cursor: pointer;
+	z-index: -2;
+}
+#tab-area2 .select select {
+	cursor: pointer;
+	padding: 3px 0px;
+	width: 100%;
+	border: none;
+	background: transparent;
+	background-image: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+ 
+#tab-area2 .select select:focus {
+		outline: none;
+	}
+#chartBottom1 .choosepc .cont img{
+	width:30px;
+}
+#chart-pzfb1,#chart-fmczfb1{
+	height:50%;
+	
+}
+#chart-fmczfb2,#chart-pzfb2{
+	height:40%;
+}
+/*
+.grid-wrapper .bottom .wrapper .block {
+    height: 48%; 
+}*/
+.grid-wrapper .bottom .wrapper .block .panel {
+    display: flex; 
+}
+.grid-wrapper .bottom .wrapper .block .panel > div {
+    width: 50%; 
+}
+
+.calendar-wrapper {
+  color: #ffffff;
+  position: relative;
+  margin: 15px;
+  min-height: 155px; 
+  margin-top:10px;
+ }
+
+.calendar-wrapper .flexoCalendar {
+  margin: 0 auto;
+  border-collapse: separate;
+  width: 100%;
+  position: relative;
+  z-index: 1; }
+
+.flexoCalendar td, .flexoCalendar th {
+  border: 0 none;
+  height: 30px;
+  line-height:30px;
+  text-align: center;
+  width: 32px;
+  font-size: 1.2em;
+  cursor: pointer;
+}
+ .flexoCalendar th {
+	font-size: 1.4em;
+}
+.flexoCalendar tr th .icon-arrow-left {
+  display: inline-block;
+  height: 16px;
+  line-height: 16px;
+  margin-top: 4px;
+  vertical-align: text-top;
+  width: 12px;
+  cursor: pointer; 
+  position:relative;
+  }
+  
+.icon-arrow-left:before,.icon-arrow-left:after{
+	width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 5;
+    border-top: 10px transparent dashed;
+    border-left: 10px transparent dashed;
+    border-bottom: 10px transparent dashed;
+    border-right: 10px #001346 solid;
+    overflow: hidden;
+  }
+.icon-arrow-left:before {
+  content: '';
+  border-right: 10px #6DDFE9 solid;
+  
+ }
+ .icon-arrow-left:after {
+	content:'';
+	left:3px;
+    border-right: 10px #001346 solid;
+  
+ }
+.flexoCalendar tr th .icon-arrow-right {
+  display: inline-block;
+  height: 16px;
+  line-height: 16px;
+  margin-top: 4px;
+  vertical-align: text-top;
+  width: 12px;
+  cursor: pointer; 
+  position:relative;
+}
+.icon-arrow-right:before,.icon-arrow-right:after{
+	width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-top: 10px transparent dashed;
+    border-right: 10px transparent dashed;
+    border-bottom: 10px transparent dashed;
+    border-left: 10px #6DDFE9 solid;
+    overflow: hidden;
+	
+  }
+.icon-arrow-right:after {
+  content: '';
+  border-left: 10px #001346 solid;
+  
+ }
+ .icon-arrow-right:before {
+	content:'';
+	left:3px;
+    border-left: 10px #6DDFE9 solid;
+  
+ }
+
+.flexoCalendar thead tr {
+  height: 40px;
+  color: #fff; 
+ }
+.flexoCalendar thead tr:nth-child(2){
+	height:50px;
+}
+.flexoCalendar thead tr:first-child th {
+  cursor: pointer; }
+
+ .flexoCalendar thead tr:first-child th:hover .icon-arrow-right:after{
+	 border-left-color: #2b488e; 
+	 
+ }
+.flexoCalendar thead tr:first-child th:hover .icon-arrow-left:after{
+  border-right-color: #2b488e; 
+}
+.flexoCalendar thead tr:first-child th:hover {
+  background: #2b488e; 
+}
+.flexoCalendar tr td.other-month {
+  color: #aaa; }
+
+.flexoCalendar thead, .flexoCalendar th {
+  font-weight: normal;
+  color: #fff; }
+
+.flexoCalendar tr th.current-year {
+  width: 60%; }
+
+.flexoCalendar td.selected-day span {
+  color: #2b488e; }
+
+.flexoCalendar tr td .day {
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  margin: 1px;
+  border: 1px solid transparent; }
+
+.flexoCalendar tr td.current-day > div, .flexoCalendar td.current-day > span {
+  border: 1px solid #2b488e !important;
+  border-radius: 4px;
+  color: #2b488e; }
+
+.flexoCalendar tr td.selected > div, .flexoCalendar tr td.selected > span, .flexoCalendar tr td.selected > div span {
+  border-radius: 4px;
+  background-color: #2b488e;
+  color: #fff !important; 
+ }
+
+#calendar-weekly .calendar-hd, #calendar-monthly .calendar-hd, #calendar-weekly tbody td {
+  height: 40px; 
+}
+
+#calendar-weekly tr td div {
+  margin-bottom: 2px; }
+
+#calendar-weekly tr td .week {
+  width: 100%;
+  height: 100%;
+  line-height: 30px;
+  color: #fff;
+  text-align: center; }
+
+#calendar-weekly tr td .process {
+  color: #999;
+  margin-left: 20px;
+  display: inline-block;
+  width: 57px;
+  text-align: left; }
+
+#calendar-monthly td.tmonth .month {
+  display: block;
+  width: 80%;
+  margin:0 auto;
+  font-size:1.2em;
+  text-align: center;
+  border-radius: 4px;
+  color: #fff;
+  border: 1px solid transparent; 
+ }
+
+#calendar-monthly td.current-month .month {
+  border: 1px solid #2b488e; 
+}
+
+#calendar-weekly tr td.week1 div, .tmonth.month1 span, .tmonth.month2 span, .tmonth.month3 span, .tmonth.month4 span {
+  margin-top: 10px !important; 
+}

css/hbjc.css

@@ -0,0 +1,177 @@
+.grid-wrapper {
+  color: #ffffff;
+  padding: 23px 16px 16px;
+  height: calc(100% - 80px);
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 33%);
+  grid-template-areas: "left1 center center right1" "left2 center center right2" "bottom1 bottom1 bottom1 bottom1"; 
+}
+.grid-wrapper .wrapper {
+    border-radius: 6px;
+    height: 100%;
+	background-color: #001346;
+	overflow: hidden;
+}
+.grid-wrapper .chart-tab-t{
+	padding-left: 82px;
+    height: 40px;
+    line-height: 40px;
+	background-color: #0f215c;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title{
+	font-size: 1em;
+    position: relative;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+.grid-wrapper .wrapper-content{
+	position:relative;
+	height:calc(100% - 40px);
+	
+}
+.grid-wrapper .wide-border{
+	height:calc(100% + 1px);
+	width:100%;
+	position:absolute;
+	top:-3px;
+	left:0px;
+	border:1px solid #53BAFD;
+}
+
+.wide-border-line1{
+	position:absolute;
+	left:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line2{
+	position:absolute;
+	right:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line3{
+	position:absolute;
+	left:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.wide-border-line4{
+	position:absolute;
+	right:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+
+.grid-wrapper .left1 {
+    grid-area: left1; 
+}
+.grid-wrapper .left2 {
+    grid-area: left2; 
+}
+.grid-wrapper .center {
+    grid-area: center; 
+}
+.right2 .chart-tab-t{
+	flex:1;
+	width:100%;
+	
+}
+ .grid-wrapper .right1 {
+    grid-area: right1; 
+}
+ .grid-wrapper .right2 {
+    grid-area: right2;
+}
+ .grid-wrapper .bottom1 {
+    grid-area: bottom1; 
+}
+ .grid-wrapper .bottom2 {
+    grid-area: bottom2; 
+}
+ .grid-wrapper .bottom3 {
+    grid-area: bottom3; 
+}
+ .grid-wrapper .bottom4 {
+    grid-area: bottom4; 
+}
+#chart-hxxyl,#chart-ad,#chart-ll,#chart-ljll,#chart-zl,#chart-zd,#chart-ph{
+	width:100%;
+	height:100%;
+}
+.grid-wrapper .center .line1 {
+    font-size: 1.4em;
+    height: 66px;
+    display: flex;
+    align-items: center; 
+}
+.grid-wrapper .center .line1 .division {
+    flex: 1;
+    height: 2px; 
+	background-color:#528DFF;
+}
+.grid-wrapper .center .line1 .cont {
+    margin: 1px 20px; 
+}
+.center .line3{
+	height:calc(100% - 66px);
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+.line3 canvas {
+    width: 940px;
+    height: 576px;
+}
+.chartBlock{
+	width:100%;
+	height:100%;
+	display:flex;
+	justify-content:space-around;
+	align-items:center;
+}
+#chartBottom1,#chartBottom2,#chartBottom3{
+	width:30%;
+	height:100%;
+}
+#chartBottom1 .chartTab-t,#chartBottom2 .chartTab-t,#chartBottom3 .chartTab-t,#chartBottom4 .chartTab-t{
+	padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+	
+}
+#chartBottom2 .chartTab-t,#chartBottom4 .chartTab-t,{
+	padding-left: 12px;
+}
+#chartBottom1 .chartTab-t .chartTab-title,#chartBottom2 .chartTab-t .chartTab-title,#chartBottom3 .chartTab-t .chartTab-title,#chartBottom4 .chartTab-t .chartTab-title{
+	font-size: 1em;
+    position: relative;
+}
+#chartBottom1 .chartTab-t .chartTab-title:before,#chartBottom2 .chartTab-t .chartTab-title:before,#chartBottom3 .chartTab-t .chartTab-title:before,#chartBottom4 .chartTab-t .chartTab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	margin-top:-7px;
+}

css/index.css

@@ -0,0 +1,583 @@
+.grid-wrapper {
+  color: #ffffff;
+  padding: 23px 16px 16px;
+  height: calc(100% - 81px);
+  display: grid;
+  display:-ms-grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-template-areas: "left1 brief brief brief right2" "left1 img img img right2" "left1 img img img right2" "bottom1 bottom1 bottom1 bottom1 bottom1"; 
+ }
+.grid-wrapper .left1 {
+    grid-area: left1; 
+	display: flex;
+    flex-direction: column;
+    justify-content: space-between; 
+}
+.grid-wrapper .wrapper-content{
+	position:relative;
+	height:calc(100% - 40px);
+	
+}
+.grid-wrapper .wide-border{
+	height:calc(100% + 1px);
+	width:100%;
+	position:absolute;
+	top:-3px;
+	left:0px;
+	border:1px solid #53BAFD;
+}
+
+.wide-border-line1{
+	position:absolute;
+	left:0px;
+	top:-26px;
+	background-color:#0E1E51
+}
+.wide-border-line2{
+	position:absolute;
+	right:0px;
+	top:-26px;
+	background-color:#0E1E51
+}
+.wide-border-line3{
+	position:absolute;
+	left:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.wide-border-line4{
+	position:absolute;
+	right:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+
+.wrapper #realtime_Data{
+	height:100%;
+}
+
+.grid-wrapper .brief {
+    grid-area: brief;
+    display: flex;
+    flex-direction: column;
+}
+.grid-wrapper .brief .line1 {
+    font-size: 18px;
+    height: 88px;
+    display: flex;
+    align-items: center; 
+}
+.grid-wrapper .brief .line1 .division {
+    flex: 1;
+    /*border-bottom: 1px solid #528DFF;*/
+    height: 4px;
+	background-color:#528DFF	
+}
+.grid-wrapper .brief .line1 .cont {
+    margin: 1px 20px; 
+	font-size:2em;
+}
+.grid-wrapper .brief .line1 .cont img{
+    cursor:pointer;
+}
+.grid-wrapper .brief .line1 img {
+    width: 30px; 
+}
+.grid-wrapper .brief .line2 {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap; 
+}
+.grid-wrapper .brief .line2 .item {
+    padding: 5px;
+    height: 50%;
+    width: 33.33%;
+}
+.grid-wrapper .brief .line2 .item .bor {
+    font-weight: bold;
+    border-radius: 6px;
+	padding:5px;
+}
+.grid-wrapper .brief .line2 .item .bor .border-zhe{
+	border: 2.5px solid #53BAFD;
+	width:100%;
+	height:100%;
+	position:relative;
+}
+.grid-wrapper .brief .line2 .item .bor .border-zhe .item-info-title{
+	
+	height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.border-zhe .zhe-block{
+	width: 15px;
+    height: 15px;
+    border-bottom: 3px solid #53BAFD;
+    position: absolute;
+    background-color: #001346;
+}
+.zhe-block-rotate1{
+	transform: rotate(45deg);
+	top: -8px;
+    right: -8px;
+}
+.zhe-block-rotate2{
+	transform: rotate(315deg);
+    left: -8px;
+    top: -8px;
+}
+.zhe-block-rotate3{
+	transform: rotate(225deg);
+    left: -8px;
+    bottom: -8px;
+}
+.zhe-block-rotate4{
+	transform: rotate(135deg);
+	bottom: -8px;
+    right: -8px;
+}
+.grid-wrapper .brief .line2 .item .bor .title {
+    font-size: 2em;
+    color: #53BAFD; 
+	font-weight:normal;
+}
+.grid-wrapper .brief .line2 .item .bor .number {
+    font-size: 2.5em;
+}
+.grid-wrapper .img {
+    grid-area: img;
+	display:flex;
+	justify-content:center;
+	align-items:center;
+}
+.img_window{
+	width:100%;
+	height:100%;
+	background: url('../images/newmap.jpg') center center no-repeat;
+	background-size:100%; 
+	padding: 0px; 
+	position: relative;
+}
+.grid-wrapper .img .img_window #diagonal{
+	border:0px none;
+	top:0px;
+	left:0;
+	position:absolute; 
+	padding: 0px; 
+	opacity: 1;
+}
+.grid-wrapper .img img{
+	border: 0px none;
+	position:absolute;
+	left:0;
+	top:0;
+	opacity:0;
+}
+.grid-wrapper .img img,.grid-wrapper .video img,.grid-wrapper .img video,.grid-wrapper .video video{
+      width: 100%;
+      height: 100%;
+}
+
+.grid-wrapper .video {
+    grid-area: video;
+}
+
+.grid-wrapper .right1 {
+    grid-area: right1; 
+}
+.grid-wrapper .right2 {
+    grid-area: right2;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; 
+}
+.grid-wrapper .left1 .wrapper1,.grid-wrapper .right2 .wrapper1 {
+    height: 48%;
+}
+.grid-wrapper .right2 .wrapper1 .cont {
+    padding: 14px 25px 14px;
+    display: grid;
+    grid-gap: 8px;
+    height: 100%;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr); 
+}
+.grid-wrapper .right2 .wrapper1 .cont .title {
+    color: #A6F4FE;
+    font-size: 1.2em;
+    margin-bottom: 6px; 
+}
+.grid-wrapper .right2 .wrapper1 .cont .num {
+    font-size: 1em; 
+}
+.grid-wrapper .right2 .wrapper1 .cont > div {
+    background-color: #060B2E;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column; 
+}
+.grid-wrapper .right2 .wrapper2 {
+    height: 48%;
+	
+}
+.grid-wrapper .right2 .wrapper2 ul.msg {
+    width: 100%; 
+}
+.warning-msg{
+	padding:0px 25px 14px;
+	overflow:hidden;
+	height:100%;
+}
+.warning-msg .msg img {
+	width:30px;
+	margin-right:5px;
+}
+.grid-wrapper .right2 .wrapper2 .msg {
+    color: #A1D8EC;
+    height: 37px;
+	line-height:37px;
+	display:flex;
+	align-items:center;
+    margin:6px 12px;
+	padding:0 8px;
+    background-color: #060B2E;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; 
+}
+.grid-wrapper .bottom1 {
+    grid-area: bottom1;
+    background-color: #060B2E;
+    overflow: hidden;
+    width: 100%; }
+.grid-wrapper .bottom1::-webkit-scrollbar {
+    display: none; 
+}
+.grid-wrapper .bottom1 ul.list {
+    height: 100%;
+    white-space: nowrap; 
+	display: inline-block;
+}
+.grid-wrapper .bottom1 ul.list li {
+    cursor: pointer;
+    margin-right: 16px;
+    height: 100%;
+    width: 300px;
+    display: inline-block;
+    flex-direction: column; 
+	
+    
+}
+.grid-wrapper .bottom1 ul.list li .leftbar {
+    background-color: #001346;
+    width: 100%;
+    height:80px;
+	display:flex;
+	justify-content:center;
+	align-items:center;
+}
+.grid-wrapper .bottom1 ul.list li .leftbar .room_num{
+	font-size: 1.6em;
+    font-weight: bold;
+	letter-spacing:0.2em;
+}
+.grid-wrapper .bottom1 ul.list li .cont {
+    height: calc(100% - 80px);
+	padding:20px 0;
+	width:100%;
+    background-color: #08133D;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: space-around;
+    font-size: 1.2em;
+    align-items: center; 
+}
+
+.grid-wrapper .bottom1 ul.list li .cont .line {
+    width: 100%;
+    display: flex;
+    align-items: center; 
+	justify-content:flex-start;
+	padding-left:40px;
+}
+.grid-wrapper .bottom1 ul.list li .cont .line img {
+    margin-right: 16px;
+    width: 30px; 
+}
+.grid-wrapper .bottom1 ul.list li .cont .line-img {
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+}
+.grid-wrapper .bottom1 ul.list li .cont .line-img img {
+    width: 30px; 
+}
+.grid-wrapper .bottom1 ul.list li.select {
+    border: 3px solid #03A2E8; 
+}
+.grid-wrapper > div {
+    overflow: hidden;
+    
+}
+.grid-wrapper > div .wrapper {
+	overflow: hidden;
+    background-color: #001346;
+	border-radius:12px;
+    border-radius: 6px;
+    border-color:#0C4D7F;
+    height: 100%; 
+}
+.grid-wrapper>div .wrapper>.tab{
+	height:40px;
+	line-height:40px;
+	background-color:#0E1E51;
+	padding-left:88px;
+	
+}
+.grid-wrapper .tab>.tab-title{
+	font-size:1.5em;
+	position:relative;
+}
+.grid-wrapper>div .wrapper>.tab>.tab-title:after{
+	content:"";
+	height:16px;
+	width:16px;
+	background-color:#fff;
+	position:absolute;
+	left:-24px;
+	top:50%;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%);
+}
+#device-status{
+	height:100%;
+	display:flex;
+	align-items:center;
+	justify-content:space-around;
+	flex-direction:column;
+}
+.device-status-box{
+	height:48%;
+	width:100%;
+}
+.grid-wrapper .chart-tab-t{
+	padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title{
+	font-size: 1em;
+    position: relative;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+#chart-snhjsj,#chart-swhjsj,#chart-rycrtj{
+	width:100%;
+	height: calc(100% - 40px)
+}
+.open-box-container {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+    display: none;
+    overflow: hidden;
+    z-index: 99;
+}
+.open-lauer-box {
+    position: fixed;
+    top: 50%;
+    width: 1000px;
+    height: 700px;
+    background-color: #021429;
+    border-radius: 10px;
+    left: 50%;
+    margin-left: -500px;
+    margin-top: -350px;
+    box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1);
+}
+.windows-dataset .open-lauer-box{
+	width: 600px;
+    height: 450px;
+	margin-left: -300px;
+}
+.open-box-head {
+    height: 50px;
+    line-height: 50px;
+    width: 100%;
+    text-align: center;
+    position: relative;
+    color: #ccf5f9;
+    font-size: 1.4em;
+    letter-spacing: 0.1em;
+}
+.open-box-head:after {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 5%;
+    height: 2px;
+    width: 90%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+.open-box-body {
+    height: calc(100% - 50px);
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.wsclset-dataTable {
+    width: 90%;
+    border: 1px solid #0b52e0;
+    color: #fff;
+}
+.wsclset-dataTable tr td {
+    border: 1px solid #0b52e0;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+}
+.wsclset-dataTable tr td.top-system-set {
+    height: 40px;
+    line-height: 40px;
+}
+.wsclset-dataTable tr td.top-system-set {
+    background-color: #0c0a4a;
+    height: 40px;
+    line-height: 40px;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.wsclset-dataTable tr td.table-real-head {
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    font-weight: bold;
+    background-color: #171567;
+}
+.wsclset-dataTable tr td .param-dataset {
+    border: 1px solid #0b52e0;
+    height: 30px;
+    line-height: 30px;
+    width: 85px;
+    background: none;
+    text-align: center;
+    border-radius: 5px;
+    color: #fff;
+}
+#chart-ssqx{
+	width:100%;
+	height:100%;
+}
+#play-box-0>canvas {
+    width: 980px;
+    height: 630px;
+}
+.news-box{
+	padding: 0px 25px 14px;
+	width:100%;
+    overflow: hidden;
+    height: 100%;
+}
+#news-list{
+	width:100%;
+    overflow: hidden;
+    height: 100%;
+}
+.news-item{
+	width:100%;
+	margin:10px 0;
+	
+}
+.news-title{
+	color: #fff;
+    line-height: 25px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+.news-content{
+	color: #A1D8EC;
+    font-size: 14px;
+    line-height: 25px;
+    margin: 6px 0;
+    padding: 0 8px;
+    background-color: #060B2E;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+}
+.single{
+	position:relative;
+}
+.single .pre,.single .next{
+    position: absolute;
+    width: 40px;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+}
+.single .pre:hover,.single .next:hover{
+	background-color: rgba(0, 0, 0, 0.3);
+}
+.single .pre{
+	left:0;
+}
+.single .next{
+	right:0;
+}
+.single .pre::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    border: solid #fff;
+    border-width: 2px 0 0 2px;
+    transform: translate(-50%, -50%) rotate(-45deg);
+    position: absolute;
+    left: 70%;
+    top: 50%;
+}
+.single .next::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    border: solid #fff;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -50%) rotate(-45deg);
+    position: absolute;
+    left: 30%;
+    top: 50%;
+}

css/jkfx.css

@@ -0,0 +1,946 @@
+.grid-wrapper {
+  color: #ffffff;
+  padding: 23px 16px 16px;
+  height: calc(100% - 80px);
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-areas: "left1 center center right" "left2 center center right" "bottom1 bottom1 bottom1 bottom1"; 
+}
+.grid-wrapper > div .wrapper {
+    border-radius: 6px;
+    height: 100%;
+	background-color: #001346;
+	overflow: hidden;
+}
+.grid-wrapper .wrapper-content{
+	position:relative;
+	height:calc(100% - 40px);
+	
+}
+.grid-wrapper .wide-border{
+	height:calc(100% + 1px);
+	width:100%;
+	position:absolute;
+	top:-3px;
+	left:0px;
+	border:1px solid #53BAFD;
+}
+
+.wide-border-line1{
+	position:absolute;
+	left:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line2{
+	position:absolute;
+	right:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line3{
+	position:absolute;
+	left:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.wide-border-line4{
+	position:absolute;
+	right:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.grid-wrapper .chart-tab-t{
+	padding-left: 82px;
+    height: 40px;
+    line-height: 40px;
+	background-color: #0f215c;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title{
+	font-size: 1em;
+    position: relative;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+.grid-wrapper .left1 {
+    grid-area: left1; 
+}
+#chart-stztzfb,#chart-styyfx{
+	height:100%;
+}
+.grid-wrapper .left2 {
+    grid-area: left2; 
+}
+.grid-wrapper .center {
+    grid-area: center; 
+}
+.grid-wrapper .center .line1 {
+    font-size: 1.4em;
+    height: 66px;
+    display: flex;
+    align-items: center; 
+}
+.grid-wrapper .center .line1 .division {
+    flex: 1;
+    height: 2px; 
+	background-color:#528DFF;
+}
+.grid-wrapper .center .line1 .cont {
+    margin: 1px 20px; 
+}
+.line1 .video-controller{
+	position:relative;
+	display:flex;
+	margin: 1px 20px;
+	
+}
+.line1 .video-controller .watch-videos{
+	
+	margin-right:30px;
+}
+.line1 .video-controller .watch-videos,.line1 .video-controller .change-direction{
+	flex:1;
+	
+}
+.line1 .video-controller .choose-videoBox{
+	width:446px;
+
+	position:absolute;
+	top:50px;
+	left:50%;
+	transform:translateX(-50%);
+-ms-transform:translateX(-50%); 	/* IE 9 */
+-moz-transform:translateX(-50%); 	/* Firefox */
+-webkit-transform:translateX(-50%); /* Safari 和 Chrome */
+-o-transform:translateX(-50%); 	/* Opera */
+	
+	z-index:100;
+	background-color: #001346;
+	border-radius:6px;
+ box-shadow:0px -5px 5px 0px rgba(255,255,255,0.1),-5px 0px 5px 0px rgba(255,255,255,0.1),5px 0px 5px 0px rgba(255,255,255,0.1),0px 5px 5px 0px rgba(255,255,255,0.1); 
+}
+.choose-videoBox .tab-videocontrol{
+	width:100%;
+	height:100%;
+}
+.tab-videocontrol .control-box1{
+	display:none;
+}
+.control-box1 .tab-video-head {
+	height:40px;
+	display: flex;
+    align-items: center;
+	justify-content:center;
+	font-size:0.8em;
+	color:#53BAFD;
+	position:relative;
+}
+.control-box1 .tab-video-body{
+	height:240px;
+	padding:10px 50px;
+}
+.control-box1 .tab-video-foot{
+	
+	
+}
+.tab-video-foot .tab-foot-top{
+	height:40px;
+	display: flex;
+    align-items: center;
+	justify-content:center;
+	font-size:0.8em;
+	color:#53BAFD;
+	position:relative;
+}
+.tab-video-foot .tab-videoes{
+	height:140px;
+	padding:10px 50px;
+	overflow:hidden;
+}
+.tab-videoes .video-item{
+	height: 31px;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    padding: 0 10px;
+    color: #fff;
+	border-bottom:1px dashed #a4cfe5;
+}
+.video-date,.video-time{
+	font-size:0.6em;
+}
+.video-item i{
+	margin-right:15px;
+}
+.video-item .time-crossline{
+	margin:0 15px;
+}
+.tab-video-body .tab-video-content{
+	display:flex;
+	align-items: center;
+	margin-top:20px;
+}
+.tab-video-content .tab-type{
+	flex:1;
+	text-align:center;
+	font-size:0.8em;
+}
+.tab-video-content .select{
+	flex:2;
+	height:32px;
+	position: relative;
+	vertical-align: middle;
+	padding: 2px;
+	overflow: hidden;
+	background-color: #001346;
+	color: #fff;
+	text-shadow: none;
+	border-radius: 4px;	
+	transition: box-shadow 0.25s ease;
+	border:1px solid #0b52e0;
+	z-index: 2;
+	display:flex;
+	align-items: center;
+}
+.tab-video-content .datetimePicker{
+	flex:2;
+	height:32px;
+	border-radius: 4px;	
+	transition: box-shadow 0.25s ease;
+    font-size: 0;
+    white-space: nowrap;
+	display:flex;
+	justify-content: space-between;
+}
+.tab-video-content .video-find{
+	flex:2;
+}
+.tab-video-content .video-find #sub-btn{
+	width:103px;
+	height:30px;
+	font-size:0.7em;
+	text-align:center;
+	line-height:30px;
+	-webkit-border-radius: 16px;
+    -moz-border-radius: 16px;
+    border-radius: 16px;
+	background-color:#ea8c29;
+	color:#fff;
+	cursor:pointer;
+}
+input[type="text"]{
+    display: inline-block;
+    height: 20px;
+    padding: 4px 6px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #555555;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    vertical-align: middle;
+	background-color: #ffffff;
+    border: 1px solid #cccccc;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    -webkit-transition: border linear .2s, box-shadow linear .2s;
+    -moz-transition: border linear .2s, box-shadow linear .2s;
+    -o-transition: border linear .2s, box-shadow linear .2s;
+    transition: border linear .2s, box-shadow linear .2s;
+}
+.input-append input{
+	position: relative;
+    margin-bottom: 0; 
+    vertical-align: top;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+	background-color: #eeeeee;
+	outline:none;
+	border:1px solid #0b52e0;
+	height: 32px;
+	color:#fff;
+	background-color: #001346;
+}
+input[readonly]{
+	cursor: not-allowed;
+   
+}
+.input-append .add-on {
+    white-space: nowrap;
+	vertical-align: middle;
+	display:flex;
+	align-items: center;
+}
+[class^="icon-"], [class*=" icon-"]{
+	display: inline-block;
+    background-image: url(../img/glyphicons-halflings-white.png);
+    background-repeat: no-repeat;
+	cursor: pointer;
+    width: 14px;
+    height: 14px;
+}
+.icon-remove {
+    background-position: -312px 0;
+}
+.icon-th {
+    background-position: -240px 0;
+}
+table {
+    max-width: 100%;
+    background-color: transparent;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.table-condensed th i{
+	background-image: url(../img/glyphicons-halflings.png);
+}
+.table-condensed th, .table-condensed td {
+    padding: 4px 5px;
+}
+.icon-arrow-left {
+    background-position: -240px -96px;
+}
+.icon-arrow-right {
+    background-position: -264px -96px;
+}
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0,0,0,0.2);
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.tab-video-content .select:before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+    border-top-color: #fff;
+    top: 12px;
+    right: 4px;
+    cursor: pointer;
+    z-index: -2;
+	
+}
+.tab-video-content .select select {
+    cursor: pointer;
+    padding: 3px 0px;
+    width: 100%;
+    border: none;
+    background: transparent;
+    background-image: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+	outline:none;
+	text-align:center;
+	color: #fff;
+	padding-left:10px;
+	font-size:0.7em;
+}
+.tab-video-content .select option{
+	background-color:#001346;
+}
+.tab-video-head:before,.tab-video-foot .tab-foot-top:before{
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 5%;
+    height: 2px;
+    width: 90%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+.watch-videos img,.change-direction img{
+	width:30px;
+	cursor:pointer;
+}
+.grid-wrapper .line2 .change-pc{
+	width:100%;
+	height:50px;
+	border: 2.5px solid #53BAFD;
+    position: relative;
+}
+.change-pc .zhe-block{
+	width: 15px;
+    height: 15px;
+    border-bottom: 3px solid #53BAFD;
+    position: absolute;
+    background-color: #001346;
+}
+.change-pc .item-info-title{
+	height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	cursor:pointer;
+}
+.change-pc .item-info-title .title{
+	font-size: 1.6em;
+	padding-right:15px;
+	margin-right:15px;
+	border-right:2px solid #53BAFD;
+    color: #53BAFD;
+    font-weight: normal;
+}
+.change-pc .item-info-title .click-check{
+	font-size:1.2em;
+}
+.change-pc .arrow-right{
+	height: 16px;
+    vertical-align: text-top;
+    width: 20px;
+    cursor: pointer;
+    position: relative;
+	margin-left:15px;
+}
+.change-pc .arrow-right:before{
+	content: '';
+    left: 3px;
+    border-left: 10px #53BAFD solid;
+}
+.arrow-right:before, .arrow-right:after {
+    width: 0;
+    height: 0;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-top: 10px transparent dashed;
+    border-right: 10px transparent dashed;
+    border-bottom: 10px transparent dashed;
+    border-left: 10px #53BAFD solid;
+    overflow: hidden;
+}
+.change-pc .arrow-right:after{
+	content: '';
+    border-left: 10px #001346 solid;
+}
+.for-click-show{
+	position:relative;
+	width:30%;
+}
+.for-click-show .choosebox{
+	display:none;
+	width:100%;
+	padding:15px;
+	position:absolute;
+	top:46px;
+	right:0;
+	border:1px solid #3bb3e0;
+	background-color:#001346;
+	z-index:99;
+}
+.for-click-show .choosebox .box-btns{
+	display: flex;
+	flex:1;
+    justify-content:space-around;
+}
+
+.a_demo_two {
+	background-color:#3bb3e0;
+	padding:10px 15px;
+	position:relative;
+	font-family: 'Open Sans', sans-serif;
+	font-size:12px;
+	text-decoration:none;
+	color:#fff;
+	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
+	background-image: -webkit-gradient(
+	linear,
+	left bottom,
+	left top,
+	color-stop(0, rgb(44,160,202)),
+	color-stop(1, rgb(62,184,229))
+	);
+	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	-o-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.a_demo_two::before {
+	background-color:#072239;
+	content:"";
+	display:block;
+	position:absolute;
+	width:100%;
+	height:100%;
+	padding-left:2px;
+	padding-right:2px;
+	padding-bottom:4px;
+	left:-2px;
+	top:5px;
+	z-index:-1;
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	-o-border-radius: 6px;
+	border-radius: 6px;
+}
+
+.a_demo_two:active {
+	color:#156785;
+	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
+	background:rgb(44,160,202);
+	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+	top:3px;
+}
+
+.a_demo_two:active::before {
+	top:-2px;
+}
+.switch-bt-active{
+	color: #156785;
+    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
+    background: rgb(44,160,202);
+    -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;
+    top:3px;
+
+}
+.choosebox .tab-areas{
+	height:130px;
+	padding-top:20px;
+}
+#tab-area1,#tab-area2{
+	height:100%;
+	
+}
+#tab-area1 .pc-nums{
+	height:100%;
+	overflow:hidden;
+	background-color:#fff;
+}
+#tab-area1 .pc-nums .item{
+	overflow:hidden;
+    height: 28px;
+    line-height: 28px;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	color:#333;
+	padding-left:5px;
+	cursor:pointer;
+	
+}
+#tab-area1 .pc-nums .item:hover{
+	background-color:#9de5f5;
+	color:#fff
+}
+
+.tabshow{
+	display:none !important;
+}
+#tab-area2{
+	display: flex;
+	flex:1;
+    justify-content:space-around;
+}
+#tab-area2 .select{
+	display: inline-block;
+	width: 45%;
+	height:28px;
+	position: relative;
+	vertical-align: middle;
+	padding: 2px;
+	overflow: hidden;
+	background-color: #fff;
+	color: #555;
+	text-shadow: none;
+	border-radius: 4px;	
+	transition: box-shadow 0.25s ease;
+	z-index: 2;
+}
+#tab-area2 .select-list{
+	width: 45%;
+	height:100%;
+	overflow:hidden;
+	background-color:#fff;
+}
+#tab-area2 .select-list .item{
+	overflow:hidden;
+    height: 28px;
+    line-height: 28px;
+	text-overflow:ellipsis;
+	white-space: nowrap;
+	color:#333;
+	padding-left:5px;
+	cursor:pointer;
+	
+}
+#tab-area2 .select-list .item:hover{
+	background-color:#9de5f5;
+	color:#fff
+}
+#tab-area2 .select:hover {
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+ 
+#tab-area2 .select:before {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border: 3px solid transparent;
+	border-top-color: #ccc;
+	top: 12px;
+	right: 4px;
+	cursor: pointer;
+	z-index: -2;
+}
+#tab-area2 .select select {
+	cursor: pointer;
+	padding: 3px 0px;
+	width: 100%;
+	border: none;
+	background: transparent;
+	background-image: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+ 
+#tab-area2 .select select:focus {
+		outline: none;
+}
+.center .line3{
+	height:calc(100% - 66px);
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+
+.zhe-block-rotate1{
+	transform: rotate(45deg);
+	top: -8px;
+    right: -8px;
+}
+.zhe-block-rotate2{
+	transform: rotate(315deg);
+    left: -8px;
+    top: -8px;
+}
+.zhe-block-rotate3{
+	transform: rotate(225deg);
+    left: -8px;
+    bottom: -8px;
+}
+.zhe-block-rotate4{
+	transform: rotate(135deg);
+	bottom: -8px;
+    right: -8px;
+}
+.grid-wrapper .right {
+    grid-area: right; 
+}
+.wrapper .msg-tab-head{
+	background-color:#0E1E51;
+	width:100%;
+	padding:10px 40px; 
+	height:100px;
+	color:#898a90;
+	display: flex;
+	flex:1;
+    justify-content:space-around;
+	flex-wrap:nowrap;
+}
+.line3 .msg-tab-body{
+	height:100%;
+	width:50%;
+}
+.line3 .msg-detail{
+	height:100%;
+	width:50%;
+}
+.msg-list-content{
+	
+	
+}
+#msg-list-content{
+	overflow-y:scroll;
+}
+#msg-list-content::-webkit-scrollbar {
+ width: 8px;
+}
+ #msg-list-content::-webkit-scrollbar-track {
+ background-color:transparent;
+ -webkit-border-radius: 2em;
+ -moz-border-radius: 2em;
+ border-radius:2em;
+}
+ #msg-list-content::-webkit-scrollbar-thumb {
+ background-color:#ccc;
+ -webkit-border-radius: 2em;
+ -moz-border-radius: 2em;
+ border-radius:2em;
+}
+
+
+.msg-tab-body .msg-list-content.active{
+	display:block;
+}
+.msg-tab-body .msg-tab-list{
+	height:80px;
+	position:relative;
+	display: flex;
+    align-items: center;
+    justify-content: space-around;
+	flex-wrap:nowrap;
+	margin:0 40px;
+	padding:10px;
+	color:#a4cfe5;
+	cursor:pointer;
+}
+.msg-tab-body .msg-tab-list:hover{
+	background-color: #0f215c;
+}
+.msg-tab-list.active{
+	background-color: #0f215c;
+}
+.msg-tab-body .msg-tab-list .man-dothis{
+	
+	flex:1;
+}
+.msg-tab-body .msg-tab-list .man-dothis img{
+	width:50px;
+	height:50px;
+	border-radius:50%;
+}
+.msg-tab-body .msg-tab-list .this-content{
+	flex:4;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+	line-height:1.2em;
+}
+.msg-tab-body .msg-tab-list .this-content .finish-time{
+	margin-right:15px;
+}
+.msg-tab-body .msg-tab-list:before{
+	content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 10%;
+    height: 2px;
+    width: 80%;
+    background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0));
+}
+.msg-tab-head .msg-tab1{
+	display: flex;
+    flex-direction: column;
+	cursor:pointer;
+}
+.msg-tab-head .msg-tab1 img{
+	width:50px;
+}
+.msg-tab-head .msg-tab1 span{
+	line-height:30px;
+	text-align:center;
+	font-size:1.2em;
+}
+.msg-tab-head .msg-tab1.active span{
+	color:#fff;
+}
+.jk-img{
+	height:50%;
+	text-align:center;
+}
+.jk-img img{
+	height:100%;
+}
+.jk-info-list{
+	padding:20px 40px;
+	
+}
+.jk-info-item{
+	color:#0b52e0;
+	font-size:20px;
+	margin:15px;
+}
+.grid-wrapper .bottom1 {
+    grid-area: bottom1; 
+}
+.grid-wrapper .wrapper .tab-t {
+    padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #0f215c;
+}
+.grid-wrapper .tab-t>.tab-title {
+    font-size: 1.5em;
+    position: relative;
+}
+.grid-wrapper .tab-t>.tab-title:before {
+    content: "";
+    position: absolute;
+    left: -1.5em;
+    top: 50%;
+    width: 0.5em;
+    height: 0.5em;
+    border: 2px solid #6DDFE9;
+    transform: rotate(45deg) translateY(-50%);
+    -ms-transform: rotate(45deg) translateY(-50%);
+    -moz-transform: rotate(45deg) translateY(-50%);
+    -webkit-transform: rotate(45deg) translateY(-50%);
+    -o-transform: rotate(45deg) translateY(-50%);
+}
+.grid-wrapper .bottom1 .wrapper .chartBlock {
+    display: flex;
+    height: calc(100% - 40px);
+	justify-content:space-around;
+	
+}
+#chartBottom1,#chartBottom2,#chartBottom3{
+	width:30%
+}
+#chartBottom1 .chartTab-t,#chartBottom2 .chartTab-t,#chartBottom3 .chartTab-t,#chartBottom4 .chartTab-t{
+	padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+	
+}
+#chartBottom2 .chartTab-t,#chartBottom4 .chartTab-t,{
+	padding-left: 12px;
+}
+#chartBottom1 .chartTab-t .chartTab-title,#chartBottom2 .chartTab-t .chartTab-title,#chartBottom3 .chartTab-t .chartTab-title,#chartBottom4 .chartTab-t .chartTab-title{
+	font-size: 1em;
+    position: relative;
+}
+#chartBottom1 .chartTab-t .chartTab-title:before,#chartBottom2 .chartTab-t .chartTab-title:before,#chartBottom3 .chartTab-t .chartTab-title:before,#chartBottom4 .chartTab-t .chartTab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	margin-top:-7px;
+}
+#chart-snwd,#chart-snsd,#chart-myfwtj,#chart-ys{
+	height:calc(100% - 40px);
+}
+
+    .grid-wrapper .bottom1 .chartWrapper {
+      display: flex; }
+      .grid-wrapper .bottom1 .chartWrapper > div {
+        width: 50%; }
+  .grid-wrapper .bottom2 {
+    grid-area: bottom2; }
+
+.right-tabs {
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.right-tabs .log-tab.active,.right-tabs .log-tab.active:before,.right-tabs .log-tab.active:after {
+    background-color: #53BAFD;
+    color: #fff;
+}
+.right-tabs .log-tab.active {
+    z-index: 3;
+}
+.right-tabs .log-tab {
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* padding: 10px 24px 8px; */
+    height: 100%;
+    width: 30%;
+    background-color: #FFF;
+    margin-right: 46px;
+    z-index: 2;
+    position: relative;
+    cursor: pointer;
+    color: #777;
+    text-transform: uppercase;
+    font-size: 1.2em;
+    transition: all 250ms ease;
+}
+.right-tabs .log-tab:before {
+    right: -24px;
+    transform: skew(30deg, 0deg);
+    box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
+    border-radius: 0 8px 0 0;
+}
+.right-tabs .log-tab:after {
+    left: -24px;
+    transform: skew(-30deg, 0deg);
+    box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
+    border-radius: 8px 0 0 0;
+}
+.right-tabs .log-tab:before, .right-tabs .log-tab:after {
+    display: block;
+    content: " ";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 44px;
+    background-color: #FFF;
+    transition: all 250ms ease;
+}
+.switch-tab-list{
+	display:none;
+	height:calc(100% - 40px);
+}
+.play-box-content{
+	width:100%;
+	height:50%;
+}
+.play-box-content canvas{
+	width:466px;
+	height:299px;
+}

css/login.css

@@ -0,0 +1,272 @@
+html,body {
+	width:100%;
+	height:100%
+}
+canvas {
+	display:block;
+	vertical-align:bottom
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: center;
+  position:absolute;
+  top:0px;
+  left:0px;
+  width:100%;
+ }
+.header-wrapper:hover .nav-bar {
+   top:0px;
+	
+}
+.header-wrapper .title {
+    text-align: center;
+    line-height: 80px;
+    font-size: 2.6em;
+    color: #69F8FE;
+	position:relative;
+}
+.header-wrapper .title svg{
+	position:absolute;
+	left:-140px;
+	top:-2px;
+}
+.header-wrapper .title:after{
+	content:'';
+	width:100%;
+	height:2px;
+	background-color:#fff;
+	position:absolute;
+	bottom:-10px;
+	left:0px;
+}
+
+.count-particles {
+	background:#002;
+	position:absolute;
+	top:48px;
+	left:0;
+	width:80px;
+	color:#13e8e9;
+	font-size:.8em;
+	text-align:left;
+	text-indent:4px;
+	line-height:14px;
+	padding-bottom:2px;
+	font-family:Helvetica,Arial,sans-serif;
+	font-weight:700
+}
+.js-count-particles {
+	font-size:1.1em
+}
+#stats,.count-particles {
+	-webkit-user-select:none;
+	margin-top:5px;
+	margin-left:5px
+}
+#stats {
+	border-radius:3px 3px 0 0;
+	overflow:hidden
+}
+.count-particles {
+	border-radius:0 0 3px 3px
+}
+#particles-js {
+	width:100%;
+	height:100%;
+	position:relative;
+	background-color: #060B2E;
+	margin-left:auto;
+	margin-right:auto;
+	overflow:hidden
+}
+.sk-rotating-plane {
+	display:none;
+	width:80px;
+	height:80px;
+	margin:auto;
+	background-color:#fff;
+	-webkit-animation:sk-rotating-plane 1.2s infinite ease-in-out;
+	animation:sk-rotating-plane 1.2s infinite ease-in-out;
+	z-index:1;
+	position:absolute;
+	top:50%;
+	left:50%;
+	margin-left:-40px;
+	margin-top:-80px
+}
+.sk-rotating-plane.active {
+	display:block
+}
+@keyframes sk-rotating-plane {
+	0% {
+	-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg);
+	transform:perspective(120px) rotateX(0deg) rotateY(0deg)
+}
+50% {
+	-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+	transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+}
+100% {
+	-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+	transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
+}
+}@keyframes login-small {
+	0% {
+	transform:scale(1);
+	-moz-transform:scale(1);
+	-webkit-transform:scale(1);
+	-o-transform:scale(1);
+	-ms-transform:scale(1)
+}
+100% {
+	transform:scale(.2);
+	-moz-transform:scale(.1);
+	-webkit-transform:scale(.2);
+	-o-transform:scale(.1);
+	-ms-transform:scale(.1)
+}
+}.login {
+	z-index:2;
+	position:absolute;
+	width:350px;
+	border-radius:5px;
+	height:380px;
+	background:#fff;
+	box-shadow:0 0 5px #333;
+	top:50%;
+	left:50%;
+	margin-top:-190px;
+	margin-left:-175px;
+	transition:all 1s;
+	-moz-transition:all 1s;
+	-webkit-transition:all 1s;
+	-o-transition:all 1s
+}
+.login-top {
+	font-size:24px;
+	margin-top:40px;
+	text-align:center;
+	box-sizing:border-box;
+	color:#333;
+	margin-bottom:40px
+}
+.login-center {
+	width:100%;
+	box-sizing:border-box;
+	padding:0 40px;
+	margin-bottom:30px
+}
+.login-center-img {
+	width:20px;
+	height:20px;
+	float:left;
+	margin-top:5px
+}
+.login-center-img>img {
+	width:100%
+}
+.login-center-input {
+	float:left;
+	width:230px;
+	margin-left:15px;
+	height:30px;
+	position:relative
+}
+.login-center-input input {
+	z-index:2;
+	transition:all .5s;
+	padding-left:10px;
+	color:#333;
+	width:100%;
+	height:30px;
+	border:0;
+	border-bottom:1px solid #ccc;
+	border-top:1px solid #fff;
+	border-left:1px solid #fff;
+	border-right:1px solid #fff;
+	box-sizing:border-box;
+	outline:0;
+	position:relative
+}
+.login-center-input input:focus {
+	border:1px solid #1e90ff
+}
+.login-center-input-text {
+	background:#fff;
+	padding:0 5px;
+	position:absolute;
+	z-index:0;
+	opacity:0;
+	height:20px;
+	top:50%;
+	margin-top:-10px;
+	font-size:14px;
+	left:5px;
+	color:#1e90ff;
+	line-height:20px;
+	transition:all .5s;
+	-moz-transition:all .5s;
+	-webkit-transition:all .5s;
+	-o-transition:all .5s
+}
+.login-center-input input:focus~.login-center-input-text {
+	top:0;
+	z-index:3;
+	opacity:1;
+	margin-top:-15px
+}
+.login.active {
+	-webkit-animation:login-small .8s;
+	animation:login-small .8s;
+	animation-fill-mode:forwards;
+	-webkit-animation-fill-mode:forwards
+}
+.login-button {
+	cursor:pointer;
+	width:250px;
+	text-align:center;
+	height:40px;
+	line-height:40px;
+	background-color:#1e90ff;
+	border-radius:5px;
+	margin:0 auto;
+	margin-top:50px;
+	color:#fff;
+	font-size:18px;
+	letter-spacing:20px;
+}
+.shake_effect {
+	-webkit-animation-name: shake;
+	animation-name: shake;
+	-webkit-animation-duration: 1s;
+	animation-duration: 1s;
+}
+ @-webkit-keyframes shake {
+ from, to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+ 10%, 30%, 50%, 70%, 90% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+}
+ 20%, 40%, 60%, 80% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+}
+}
+ @keyframes shake {
+ from, to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+ 10%, 30%, 50%, 70%, 90% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+}
+ 20%, 40%, 60%, 80% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+}
+}

css/scrollBar.css

@@ -0,0 +1 @@
+.zl-scrollBarBox{height:100%;position:absolute;background:#001346}.zl-scrollBar{position:absolute;left:0;top:0;background:#848484;transition:background .3s}.zl-scrollBar.zl-verticalBar{min-height:10px}.zl-scrollBar.zl-horizontalBar{min-width:10px}.zl-scrollBar:hover{background:#000}.zl-scrollContentDiv{position:relative!important;width:100%!important;height:100%!important;padding:0!important;margin:0!important;top:0;left:0}

css/spjk.css

@@ -0,0 +1,212 @@
+@import "https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css";
+.video-content{
+	color: #ffffff;
+	padding: 23px 16px 16px;
+	height: calc(100% - 80px);
+}
+.video-content .tab-list{
+	width:100%;
+	display:flex;
+	justify-content:center;
+	padding:30px 0;
+}
+.video-content .tab-list .build-tab{
+	padding:10px 25px;
+	border:1px solid #2196f3;
+	margin-left:20px;
+	border-radius:25px;
+	cursor:pointer;
+	font-size:1.8em;
+}
+.video-content .tab-list .build-tab.active{
+	background-color:#2196f3
+}
+.video-content .tab-list .build-tab:nth-child(1){
+	margin-left:0px;
+}
+.video-content .tab-list .build-tab:hover{
+	background-color:#2196f3
+}
+.video-content .video-box{
+	width:100%;
+}
+.video-box .video-wrapper{
+	display:flex;
+	flex-direction:column;
+	align-items:center;
+	
+}
+.video-box .video-wrapper .video-wrapper-head{
+	padding:20px 40px;
+	font-size:1.8em;
+	position:relative;
+}
+.video-box .video-wrapper .video-wrapper-head:before{
+	content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    background: linear-gradient(to right, rgba(33,150,243,0), #2196f3, rgba(33,150,243,0));
+}
+.video-box .video-wrapper .video-windows{
+	padding:20px;
+	display:flex;
+	flex-wrap:wrap;
+	width:100%;
+	position:relative;
+	justify-content:center;
+}
+
+.video-windows .video-play1{
+	width:50%;	
+	padding:10px;
+}
+.video-windows .video-play1 .video-play1-container{
+	background-color:#0E1E51;
+}
+.video-windows .video-play1 .tab{
+	height: 40px;
+    line-height: 40px;
+    padding-left: 68px;
+	color:#fff;
+}
+.video-windows .video-play1 .tab .tab-title{
+	font-size:1.2em;
+	color:#69F8FE;
+}
+.video-windows .video-play1 .tab .clqk{
+	font-size:1.2em;
+	margin:0 30px;
+	font-weight:bold;
+}
+.video-windows .video-play1 .tab .dutyman{
+	font-size:1.2em;
+	font-weight:bold;
+	
+}
+.video-windows .video-play1 .tab .tab-time{
+	font-size:1em;
+	margin-left:10px
+}
+.video-windows .video-play1 .video{
+	border:1px solid #53BAFD;
+	padding:10px;
+	position:relative;
+}
+.video-windows .video-play1 .video video{
+	width:100%;
+}
+.wide-border-line1 {
+    position: absolute;
+    left: -1px;
+    top: -24px;
+    background-color: #0E1E51;
+}
+.wide-border-line2 {
+    position: absolute;
+    right: -1px;
+    top: -24px;
+    background-color: #0E1E51;
+}
+.select {
+    position: relative;
+    display: block;
+    margin: 0 30px;
+    width: 100%;
+    max-width: 325px;
+    color: #cccccc;
+    vertical-align: middle;
+    text-align: left;
+    user-select: none;
+    -webkit-touch-callout: none;
+}
+.select .placeholder {
+    position: relative;
+    display: block;
+    background-color: #393d41;
+    z-index: 1;
+    padding: 1em;
+    border-radius: 2px;
+    cursor: pointer;
+}
+.select .placeholder:hover {
+    background: #34383c;
+}
+.select .placeholder:after {
+    position: absolute;
+    right: 1em;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: 'FontAwesome';
+    content: '\f078';
+    z-index: 10;
+}
+.select.is-open .placeholder:after {
+    content: '\f077';
+}
+.select.is-open ul {
+    display: block;
+}
+.select.select--white .placeholder {
+    background: #fff;
+    color: #999;
+}
+.select.select--white .placeholder:hover {
+    background: #fafafa;
+}
+.select ul {
+    display: none;
+    position: absolute;
+    overflow: hidden;
+    width: 100%;
+    background: #fff;
+    border-radius: 2px;
+    top: 100%;
+    left: 0;
+    list-style: none;
+    margin: 5px 0 0 0;
+    padding: 0;
+    z-index: 100;
+}
+.select ul li {
+    display: block;
+    text-align: left;
+    padding: 0.8em 1em 0.8em 1em;
+    color: #999;
+    cursor: pointer;
+}
+.select ul li:hover {
+    background: #4ebbf0;
+    color: #fff;
+}
+.playerbox{
+	width:885px;
+	height:498px;
+	
+}
+.playerbox canvas{
+	width:100%;
+	height:100%;
+}
+
+#deviceList{
+	max-height:500px;
+	overflow-y:scroll;
+}
+#deviceList::-webkit-scrollbar {
+ width: 8px;
+}
+ #deviceList::-webkit-scrollbar-track {
+ background-color:transparent;
+ -webkit-border-radius: 2em;
+ -moz-border-radius: 2em;
+ border-radius:2em;
+}
+ #deviceList::-webkit-scrollbar-thumb {
+ background-color:#ccc;
+ -webkit-border-radius: 2em;
+ -moz-border-radius: 2em;
+ border-radius:2em;
+}

css/spzs.css

@@ -0,0 +1,735 @@
+.grid-wrapper {
+  color: #ffffff;
+  padding: 23px 16px 16px;
+  height: calc(100% - 80px);
+  width:100%;
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: 1fr 1fr 40px 1fr;
+  grid-template-areas: "left1 center center right" "left2 center center right" "timeline timeline timeline timeline" "bottom1 bottom2 bottom3 bottom4"; 
+}
+.grid-wrapper .left1 {
+    grid-area: left1; 
+}
+.grid-wrapper .center {
+    grid-area: center; 
+}
+.grid-wrapper .right {
+    grid-area: right; 
+}
+.grid-wrapper .left2 {
+    grid-area: left2; 
+}
+.grid-wrapper .timeline {
+    grid-area: timeline; 
+}
+.grid-wrapper .bottom1 {
+    grid-area: bottom1; 
+}
+.grid-wrapper .bottom2 {
+    grid-area: bottom2; 
+}
+.grid-wrapper .bottom3 {
+    grid-area: bottom3; 
+}
+.grid-wrapper .bottom4 {
+    grid-area: bottom4; 
+}
+.grid-wrapper > div .wrapper {
+    border-radius: 6px;
+    height: 100%;
+	background-color: #001346;
+	overflow: hidden;
+}
+.grid-wrapper .wrapper-content{
+	position:relative;
+	height:calc(100% - 40px);
+	
+}
+.grid-wrapper .wide-border{
+	height:calc(100% + 1px);
+	width:100%;
+	position:absolute;
+	top:-3px;
+	left:0px;
+	border:1px solid #53BAFD;
+}
+
+.wide-border-line1{
+	position:absolute;
+	left:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line2{
+	position:absolute;
+	right:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+/*边框长*/
+.wide-border-long-line2{
+	position:absolute;
+	right:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line3{
+	position:absolute;
+	left:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.wide-border-line4{
+	position:absolute;
+	right:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.grid-wrapper .chart-tab-t{
+	padding-left: 82px;
+    height: 40px;
+    line-height: 40px;
+	background-color: #0f215c;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title{
+	font-size: 1em;
+    position: relative;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+#chart-sczztcjg,#chart-sczzgcqk,#chart-pc1zzxx,#chart-pc2zzxx{
+	height:100%;
+}
+.grid-wrapper .center{
+	display: flex;
+    flex-direction: column;
+	justify-content:space-between;
+}
+.center .line1{
+	display:flex;
+	align-items:center;
+	height:70px;
+}
+.center .line1 img{
+	width:40px;
+	cursor:pointer;
+}
+.center .line1 .swtichBtn{
+	position:relative;
+}
+.center .line1 .swtichBtn .choosebox {
+   display:none;
+    width: 180px;
+    padding: 15px;
+    position: absolute;
+    top: 40px;
+    left: 50%;
+	z-index:99;
+    border: 1px solid #3bb3e0;
+    background-color: #001346;
+	transform:translateX(-50%);
+-ms-transform:translateX(-50%); 	/* IE 9 */
+-moz-transform:translateX(-50%); 	/* Firefox */
+-webkit-transform:translateX(-50%); /* Safari 和 Chrome */
+-o-transform:translateX(-50%); 	/* Opera */
+}
+.grid-wrapper .center .line1 .cont {
+    margin: 1px 20px;
+	font-size:2.0em
+}
+.grid-wrapper .center .line1 .cont.backurl {
+	cursor:pointer;
+}
+.grid-wrapper .center .line1 .division {
+    flex: 1;
+    height: 2px;
+    background-color: #528DFF;
+}
+.choosebox .tab-areas {
+    height: 200px;
+}
+#tab-area1{
+    height: 100%;
+}
+#tab-area1 .pc-nums {
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+}
+#tab-area1 .pc-nums .item {
+    overflow: hidden;
+    height: 28px;
+    line-height: 28px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #333;
+    padding-left: 5px;
+    cursor: pointer;
+	font-size:0.6em;
+}
+#tab-area1 .pc-nums .item:hover{
+	background-color:#9de5f5;
+	color:#fff
+}
+.center .line2{
+	flex:1;
+	height:30%;
+	background-color:#001346;
+	margin-bottom:10px;
+	border-radius:6px;
+
+}
+
+.line2 .line2-content{
+	display: flex;
+    flex-wrap: wrap;
+	align-items:center;
+	justify-content:space-between;
+	padding:10px;
+	height:100%;
+}
+.line2 .qrcode{
+	flex:1;
+	display: flex;
+	justify-content:center;
+	align-items:center;
+}
+.line2 img{
+	width:80%;
+}
+.line2-data-item{
+	flex:4;
+	display:flex;
+	flex-wrap: wrap;
+	height:100%;
+	justify-content:space-between;
+}
+.line2-data-item .data-item1{
+	height:50%;
+	width:50%;
+	padding:5px;
+}
+.line2-data-item .data-item1 .item1-content{
+	background-color:#060B2E;
+	border-radius:6px;
+	width:100%;
+	height:100%;
+	display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.line2-data-item .data-item1 .item1-content .title{
+	color:#69F8FE;
+	font-size:1.8em;
+}
+.line2-data-item .data-item1 .item1-content .data-value{
+	font-size:1.8em;
+	font-weight:bold;
+	overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+	max-width: 60%;
+}
+.center .line3{
+	height:calc(70% - 80px);
+	display:flex;
+	align-items:center;
+	padding:10px;
+}
+.center .line3 .left-table,.center .line3 .right-table{
+	flex:1;
+	height:100%;
+	overflow:hidden;
+}
+.center .line3 .left-table .table-mygl-head{
+	min-height:30px;
+	color: #fff;
+	background-color:#8bc34a;
+	display:flex;
+	align-items:center;
+	width:98%;
+	margin:0 auto;
+}
+.center .line3 .left-table .table-mygl-head .table-mygl-head-th{
+	text-align:center;
+	width:70px;
+}
+.center .line3 .left-table .table-mygl-head .table-mygl-head-th:nth-child(2){
+	flex:1;
+}
+.center .line3 .right-table .table-zlgl-head{
+	min-height:30px;
+	color: #fff;
+	background-color:#f44336;
+	display:flex;
+	align-items:center;
+	width:98%;
+	margin:0 auto;
+}
+.center .line3 .right-table .table-zlgl-head .table-zlgl-head-th{
+	text-align:center;
+	width:70px;
+}
+.center .line3 .right-table .table-zlgl-head .table-zlgl-head-th:nth-child(3){
+	flex:1;
+}
+.center .line3 .left-table .table-mygl-body{
+	height:calc(100% - 30px);
+}
+.center .line3 .right-table .table-zlgl-body{
+	height:calc(100% - 30px);
+}
+.center .line3 .left-table .table-mygl{
+	margin:0 auto;
+	width:98%;
+	height:100%;
+	font-size:1em;
+	border:1px solid #8bc34a;
+}
+.center .line3 .right-table .table-zlgl{
+	margin:0 auto;
+	width:98%;
+	height:100%;
+	font-size:1em;
+	border:1px solid #f44336;
+}
+
+.left-table .table-mygl tr:nth-child(odd) td{
+	background-color:#b2cc95
+}
+.left-table .table-mygl tr:nth-child(even) td{
+	background-color:#fff
+}
+.right-table .table-zlgl tr:nth-child(odd) td{
+	background-color:#ca8a85
+}
+.right-table .table-zlgl tr:nth-child(even) td{
+	background-color:#fff
+}
+.left-table .table-mygl tr td{
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:70px;
+	padding:0 3px;
+}
+.left-table .table-mygl tr td:nth-child(2){
+	width:auto;
+}
+.right-table .table-zlgl tr td:nth-child(3){
+	width:auto;
+}
+.right-table .table-zlgl tr td{
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:70px;
+	padding:0 3px;
+}
+.left-table .table-mygl tr td{
+	color:#333;
+	font-size:0.8em;
+}
+.right-table .table-zlgl tr td{
+	color:#333;
+	font-size:0.8em;
+}
+.right .right-content{
+	display:flex;
+	flex-direction:column;
+	height:100%;
+	justify-content:space-between;
+}
+.right-top-block{
+	height:30%;
+}
+.right-bottom-block{
+	height:65%;
+}
+.right-top-block #box-aqzrr{
+	height:100%;
+	display:flex;
+	padding:10px 25px;
+	justify-content:flex-start;
+	align-items:center;
+	flex-wrap:wrap;
+}
+#box-aqzrr .aqzrr-content{
+	padding:15px 10px;
+	margin-left:10px;
+	background-color:#060B2E;
+	border-radius:6px;
+	display:flex;
+	align-items:center;
+	font-size:1.2em;
+	justify-content:center;
+}
+
+.right-bottom-block .tabbed{
+
+    transition: border 250ms ease;
+}
+
+.right-bottom-block .right-tabs{
+	height:40px;
+	display:flex;
+	justify-content:center;
+	align-items:center;
+}
+.tabbed.round .right-tabs .log-tab {
+    border-radius: 8px 8px 0 0;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+    /*padding: 10px 24px 8px;*/
+	height:100%;
+	width:30%;
+    background-color: #FFF;
+    margin-right: 46px;
+    z-index: 2;
+    position: relative;
+    cursor: pointer;
+    color: #777;
+    text-transform: uppercase;
+    font-size:1.2em;
+    transition: all 250ms ease;
+}
+.tabbed .right-tabs .log-tab:before, .tabbed .right-tabs .log-tab:after {
+    display: block;
+    content: " ";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 44px;
+    background-color: #FFF;
+    transition: all 250ms ease;
+}
+.tabbed .right-tabs .log-tab:before {
+    right: -24px;
+    transform: skew(30deg, 0deg);
+    box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
+	border-radius: 0 8px 0 0;
+}
+.tabbed .right-tabs .log-tab:after {
+    left: -24px;
+    transform: skew(-30deg, 0deg);
+    box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
+	border-radius: 8px 0 0 0;
+}
+.tabbed .right-tabs .log-tab.active {
+    z-index: 3;
+}
+.tabbed .right-tabs .log-tab.active, .tabbed .right-tabs .log-tab.active:before, .tabbed .right-tabs .log-tab.active:after {
+    background-color: #53BAFD;
+    color: #fff;
+}
+.right-bottom-block .right-logs{
+	height:calc(100% - 40px);
+	padding:15px 10px 20px;
+	overflow:hidden;
+	border:1px solid #53BAFD;
+}
+.right-bottom-block .right-logs .log-list{
+	height:100%;
+	width:100%;
+	overflow:hidden;
+}
+.right-bottom-block .right-logs .log-list .log-item{
+	height:42px;
+	display:flex;
+	align-items:center;
+	font-size:1.4em;
+	width:100%;
+	margin: 0px 12px 12px;
+	line-height:42px;
+	padding: 0 8px 0;
+	background-color:#060B2E;
+}
+.right-bottom-block .right-logs .log-list .log-item .log-time{
+	margin-right:20px;
+}
+.right-bottom-block .right-logs .log-list .log-item .log-content{
+    color: #A1D8EC;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+	
+}
+.timeline .timeline-content{
+	display: flex;
+    align-items: center;
+	height:100%;
+}
+.timeline .timeline-content .timedot{
+	position:relative;
+	padding:0 25px;
+}
+.timeline .timeline-content .timedot:before{
+	content:'';
+	position:absolute;
+	top:50%;
+	left:0px;
+	width:15px;
+	height:15px;
+	border-radius:50%;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+	background-color:#ff9800;
+}
+.timeline .timeline-content .timedot .timedot-title{
+	font-size:1.2em;
+	color: #69F8FE;
+}
+.timeline .timeline-content .timedot .timedot-date{
+	font-size:1.2em;
+}
+.timeline .timeline-content .lineoftime{
+	flex:1;
+	background-color:#ea4019;
+	height:3px;
+}
+/*bottom1*/
+
+#table-szzsqk,#table-xsjl,#table-whhcllb{
+	height:100%;
+	padding:10px 10px 26px;
+	background-color: #001346;
+	overflow:hidden;
+	z-index:1;
+	cursor:pointer
+}
+#table-szzsqk .szzsqk-block,#table-xsjl .xsjl-block,#table-whhcllb .whhcllb-block{
+	width:100%;
+	height:100%;
+	position:relative;
+}
+#table-szzsqk .table-area-head{
+	margin:0 auto;
+	width:98%;
+	font-size:0.9em;
+	border:1px solid #ff9800;
+	display:flex;
+	align-items:center;
+}
+#table-szzsqk .table-area-head .table-area-head-tab{
+	color: #fff;
+	background-color:#ff9800;
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:50px;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+#table-whhcllb .table-area-head{
+	margin:0 auto;
+	width:98%;
+	font-size:0.9em;
+	display:flex;
+	align-items:center;
+	background-color:#9e9e9e;
+}
+#table-whhcllb .table-area-head .table-area-head-tab{
+	color: #fff;
+	background-color:#9e9e9e;
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:16.66%;
+	
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+#table-xsjl .table-area-head{
+	margin:0 auto;
+	width:98%;
+	font-size:0.9em;
+	border:1px solid #5168e8;
+	display:flex;
+	align-items:center;
+}
+#table-xsjl .table-area-head .table-area-head-tab{
+	color: #fff;
+	background-color:#5168e8;
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:25%;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+#table-szzsqk .table-area-head .table-area-head-tab:nth-child(2){
+	flex:1;
+}
+#table-szzsqk .table-area,#table-xsjl .table-area,#table-whhcllb .table-area{
+	width:100%;
+	position:absolute;
+	top:29px;
+	left:0;
+	height:calc(100% - 30px);
+	overflow:hidden;
+}
+
+#table-szzsqk .table-content{
+	margin:0 auto;
+	width:98%;
+	height:100%;
+	font-size:0.9em;
+	border:1px solid #ff9800;
+}
+#table-xsjl .table-content{
+	margin:0 auto;
+	width:98%;
+	height:100%;
+	font-size:0.9em;
+	border:1px solid #5168e8;
+}
+#table-whhcllb .table-content{
+	margin:0 auto;
+	width:98%;
+	height:100%;
+	font-size:0.9em;
+	border:1px solid #9e9e9e;
+}
+#table-szzsqk .table-content tr:nth-child(odd) td{
+	background-color:#fbe1bb
+}
+#table-szzsqk .table-content tr:nth-child(even) td{
+	background-color:#fff
+}
+#table-xsjl .table-content tr:nth-child(odd) td{
+	background-color:#97cee6
+}
+#table-xsjl .table-content tr:nth-child(even) td{
+	background-color:#fff
+}
+#table-whhcllb .table-content tr:nth-child(odd) td{
+	background-color:#e2d9d9
+}
+#table-whhcllb .table-content tr:nth-child(even) td{
+	background-color:#fff
+}
+#table-szzsqk .table-content tr td{
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:50px;
+	padding:0 5px;
+}
+#table-szzsqk .table-content tr td:nth-child(2){
+	width:auto;
+}
+#table-xsjl .table-content tr td{
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:25%;
+	padding:0 3px;
+	
+}
+#table-whhcllb .table-content tr td{
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	width:16.6%;
+	padding:0 3px;
+	
+}
+#table-xsjl .table-content tr td{
+	color:#333;
+	font-size:1.2em;
+}
+#table-szzsqk .table-content tr td{
+	font-size:0.8em;
+	color:#333;
+}
+#table-whhcllb .table-content tr td{
+	font-size:0.8em;
+	color:#333;
+}
+#chart-mzstjl,#chart-twsl{
+	height:100%;
+}
+#block-slda{
+	display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    justify-content: space-around;
+	padding:20px;
+}
+#block-slda .slda-data-left{
+	width:60%;
+	display: flex;
+	flex-direction:column;
+	justify-content: space-around;
+}
+#block-slda .slda-data-right{
+	width:35%;
+}
+#block-slda .slda-data{
+	
+    width: 100%;
+	display: flex;
+	align-items:center;
+	
+}
+#block-slda .slda-datar{
+	display: flex;
+	flex-direction:column;
+	align-items:center;
+}
+#block-slda .slda-datar .data-title{
+	height:40px;
+	display: flex;
+	align-items:center;
+}
+#block-slda .slda-data .data-title{
+	width:35%;
+}
+#block-slda .slda-data .data-value{
+	width:60%;
+	word-wrap : break-word ;
+	word-break:break-all;
+}
+#block-slda .slda-datar .data-value img{
+	width:100%;
+}
+.bottom2,.bottom3{
+	position:relative;
+	cursor:pointer;
+	
+}
+.wrapper.tableb{
+	position:absolute;
+	top:0;
+	left:0;
+	z-index:2;
+	width:100%;
+	display:none;
+}
+

css/xtsz.css

@@ -0,0 +1,40 @@
+.sz-container{
+	color: #ffffff;
+	padding: 23px 16px 16px;
+	height: calc(100% - 80px);
+	display:flex;
+}
+.left-barge{
+	flex:1;
+	position:relative;
+	height:100%;
+	display:flex;
+	padding:20px;
+	flex-wrap:wrap;
+	align-items:flex-start;
+	justify-content:flex-start;
+}
+.left-barge .build-name{
+	padding:5px 10px;
+	cursor:pointer;
+}
+.left-barge .build-name:hover{
+	color:#2196f3;
+}
+.left-barge .build-name.active{
+	color:#2196f3;
+}
+.left-barge:before{
+	content: '';
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(33,150,243,0), #2196f3, rgba(33,150,243,0));
+}
+.right-barge{
+	flex:4;
+	background-image:url(../images/b1.png);
+	background-size:100%;
+}

css/yzfx.css

@@ -0,0 +1,429 @@
+.grid-wrapper {
+  color: #ffffff;
+  padding: 23px 16px 16px;
+  height: calc(100% - 80px);
+  display: grid;
+  grid-gap: 8px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-areas: "left1 center right1" "left2 left2 right2" "bottom1 bottom1 bottom2"; 
+}
+.grid-wrapper > div .wrapper {
+    border-radius: 6px;
+    height: 100%;
+	background-color: #001346;
+	overflow: hidden;
+}
+.grid-wrapper .wrapper-content{
+	position:relative;
+	height:calc(100% - 40px);
+	
+}
+.grid-wrapper .wide-border{
+	height:calc(100% + 1px);
+	width:100%;
+	position:absolute;
+	top:-3px;
+	left:0px;
+	border:1px solid #53BAFD;
+}
+
+.wide-border-line1{
+	position:absolute;
+	left:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line2{
+	position:absolute;
+	right:0px;
+	top:-26px;
+	background-color:#0f215c
+}
+.wide-border-line3{
+	position:absolute;
+	left:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.wide-border-line4{
+	position:absolute;
+	right:0px;
+	bottom:0;
+	background-color:#001346;
+	
+}
+.grid-wrapper .chart-tab-t{
+	padding-left: 82px;
+    height: 40px;
+    line-height: 40px;
+	background-color: #0f215c;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title{
+	font-size: 1em;
+    position: relative;
+}
+.grid-wrapper .chart-tab-t .chart-tab-title:before{
+	content:'';
+	width:14px;
+	height:14px;
+	border-radius:50%;
+	position:absolute;
+	left:-20px;
+	top:50%;
+	background-color:#fff;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+.grid-wrapper > div .tab-t {
+    padding-left: 102px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #0f215c; 
+}
+.grid-wrapper .tab-t>.tab-title {
+    font-size: 1.5em;
+    position: relative;
+}
+.grid-wrapper .tab-t>.tab-title:before {
+	content:"";
+	position:absolute;
+	left:-1.5em;
+	top:50%;
+	width: 0.5em;
+	height: 0.5em;
+	border:2px solid #6DDFE9;
+	transform:rotate(45deg) translateY(-50%);
+-ms-transform:rotate(45deg) translateY(-50%); 	/* IE 9 */
+-moz-transform:rotate(45deg) translateY(-50%); 	/* Firefox */
+-webkit-transform:rotate(45deg) translateY(-50%); /* Safari 和 Chrome */
+-o-transform:rotate(45deg) translateY(-50%); 	/* Opera */
+
+}
+.grid-wrapper .left1 {
+    grid-area: left1; 
+}
+#chart-kgsszsl,#chart-zycbfx,#chart-xscblrbj,#pcxyfx-chart-content{
+	height:100%;
+	position:relative;
+	z-index:10;
+}
+.grid-wrapper .center {
+    grid-area: center; 
+}
+.grid-wrapper .left2 {
+    grid-area: left2; 
+}
+#clqkfx-charts,#ydxsbg-charts{
+	height:calc(100% - 40px);
+	display:flex;
+	
+}
+#clqkfx-charts .chart1,#ydxsbg-charts .chart1{
+	flex:1;
+	position:relative;
+}
+#clqkfx-charts .chart2{
+	position:relative;
+	cursor:pointer;
+}
+#clqkfx-charts .chart2,#ydxsbg-charts .chart2{
+	flex:1;
+}
+#clqkfx-charts .chart1 .chart-tab-t,#clqkfx-charts .chart2 .chart-tab-t,#ydxsbg-charts .chart1 .chart-tab-t,#ydxsbg-charts .chart2 .chart-tab-t{
+	background-color:#001346;
+}
+#clqkfx-charts .chart1 #chart-clsl,#ydxsbg-charts .chart1 #chart-xsjg{
+	height:calc(100% - 40px);
+	position:relative;
+}
+#clqkfx-charts .chart2 #chart-yfzrlfb,#ydxsbg-charts .chart2 #chart-xsslje,#chart-pcxyfx{
+	height:calc(100% - 40px);
+}
+#clqkfx-charts .chart1 #chart-clsl:before,#ydxsbg-charts .chart1 #chart-xsjg:before{
+	content:"";
+	position:absolute;
+	right:60px;
+	top:50%;
+	transform:translateY(-50%);
+-ms-transform:translateY(-50%); 	/* IE 9 */
+-moz-transform:translateY(-50%); 	/* Firefox */
+-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+	width:3px;
+	height:60%;
+	background-color:#53BAFD;
+}
+#table-yfzrlfb{
+	width:100%;
+	height:calc(100% - 40px);
+	position:absolute;
+	top:40px;
+	left:0;
+	background-color: #001346;
+	display:none;
+	padding-bottom:10px;
+	z-index:1;
+	cursor:pointer
+}
+
+#table-yfzrlfb .table-area{
+	height:100%;
+	overflow:hidden;
+}
+#table-yfzrlfb .table-content{
+	margin:0 auto;
+	width:90%;
+	height:100%;
+	font-size:1em;
+}
+#table-yfzrlfb .table-content tr th{
+	color: #65c6e2;
+}
+#table-yfzrlfb .table-content tr th,#table-yfzrlfb .table-content tr td{
+	text-align:center;
+	height:30px;
+	vertical-align:middle;
+	border:1px solid #528DFF;
+}
+.grid-wrapper .center{
+	display: flex;
+    flex-direction: column;
+	justify-content:space-between;
+}
+.center .line1{
+	display:flex;
+	align-items:center;
+	height:40px;
+	font-size:1.4em;
+}
+.center .line1 img{
+	width:40px;
+	cursor:pointer;
+}
+.center .line1 .swtichBtn{
+	position:relative;
+}
+.center .line1 .swtichBtn .choosebox {
+   display:none;
+    width: 180px;
+    padding: 15px;
+    position: absolute;
+    top: 40px;
+    left: 50%;
+	z-index:99;
+    border: 1px solid #3bb3e0;
+    background-color: #001346;
+	transform:translateX(-50%);
+-ms-transform:translateX(-50%); 	/* IE 9 */
+-moz-transform:translateX(-50%); 	/* Firefox */
+-webkit-transform:translateX(-50%); /* Safari 和 Chrome */
+-o-transform:translateY(-50%); 	/* Opera */
+}
+.choosebox .tab-areas {
+    height: 200px;
+}
+#tab-area1{
+    height: 100%;
+}
+#tab-area1 .pc-nums {
+    height: 100%;
+    overflow: hidden;
+    background-color: #fff;
+}
+#tab-area1 .pc-nums .item {
+    overflow: hidden;
+    height: 28px;
+    line-height: 28px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #333;
+    padding-left: 5px;
+    cursor: pointer;
+	font-size:0.8em;
+}
+#tab-area1 .pc-nums .item:hover{
+	background-color:#9de5f5;
+	color:#fff
+}
+.center .line2{
+	flex:1;
+	
+	background-color:#001346;
+	margin-bottom:10px;
+	border-radius:6px;
+	
+	
+}
+.line2 .line2-content{
+	display: flex;
+    flex-wrap: wrap;
+	align-items:center;
+	justify-content:space-between;
+	padding:10px;
+	height:99.99% !important;
+}
+.line2 .qrcode{
+	flex:1;
+	display: flex;
+	justify-content:center;
+	align-items:center;
+}
+.line2 img{
+	width:80%;
+}
+.line2-data-item{
+	flex:4;
+	display:flex;
+	flex-wrap: wrap;
+	height:100%;
+	justify-content:space-between;
+}
+.line2-data-item .data-item1{
+	height:50%;
+	width:50%;
+	padding:5px;
+}
+.line2-data-item .data-item1 .item1-content{
+	background-color:#060B2E;
+	border-radius:6px;
+	width:100%;
+	height:100%;
+	display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.line2-data-item .data-item1 .item1-content .title{
+	color:#69F8FE;
+	font-size:1.2em;
+}
+.line2-data-item .data-item1 .item1-content .data-value{
+	font-size:1.2em;
+	font-weight:bold;
+	overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+	max-width: 60%;
+}
+.center .line3{
+	flex:1;
+	
+	background-color:#001346;
+	border-radius:6px;
+	
+}
+.center .line3 .line3-content{
+	
+	padding:10px 20px;
+	height:99.99%;
+}
+.center .line3 .line3-content .lrb-content{
+	border: 2.5px solid #53BAFD;
+    position: relative;
+	height:100%;
+}
+.center .line3 .line3-content .lrb-content .lrb-info{
+	height:100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.center .line3 .line3-content .lrb-content .lrb-info .lrb-block{
+	display: flex;
+    align-items: baseline;
+}
+.center .line3 .line3-content .lrb-content .lrb-info .gjzs-title {
+	font-size:1.8em;
+	color:#65c6e2;
+}
+.center .line3 .line3-content .lrb-content .lrb-info .lrb-title {
+	font-size:1.8em;
+	color:#65c6e2;
+}
+.center .line3 .line3-content .lrb-content .lrb-info .gjzs-data {
+	font-size:2.8em;
+}
+.lrb-content .zhe-block{
+	width: 15px;
+    height: 15px;
+    border-bottom: 3px solid #53BAFD;
+    position: absolute;
+    background-color: #001346;
+}
+.zhe-block-rotate1{
+	transform: rotate(45deg);
+	top: -8px;
+    right: -8px;
+}
+.zhe-block-rotate2{
+	transform: rotate(315deg);
+    left: -8px;
+    top: -8px;
+}
+.zhe-block-rotate3{
+	transform: rotate(225deg);
+    left: -8px;
+    bottom: -8px;
+}
+.zhe-block-rotate4{
+	transform: rotate(135deg);
+	bottom: -8px;
+    right: -8px;
+}
+.grid-wrapper .center .line1 .cont {
+    margin: 1px 20px;
+}
+.grid-wrapper .center .line1 .division {
+    flex: 1;
+    height: 2px;
+    background-color: #528DFF;
+}
+#pcxyfx-chart-content .pcxyfx-tabs{
+	height:40px;
+	display:flex;
+	width:100%;
+	align-items:center;
+	justify-content:center;
+}
+#pcxyfx-chart-content .pcxyfx-tabs .tab-title{
+	cursor:pointer;
+	position:relative;
+	margin-left:40px;
+}
+#pcxyfx-chart-content .pcxyfx-tabs .tab-title.active{
+	color:#03a9f4;
+}
+#pcxyfx-chart-content .pcxyfx-tabs .tab-title:before{
+	content: '';
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    position: absolute;
+    left: -20px;
+    top: 50%;
+    background-color: #fff;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+}
+#pcxyfx-chart-content .pcxyfx-tabs .tab-title.active:before{
+	background-color: #03a9f4;
+}
+.grid-wrapper .right1 {
+    grid-area: right1; 
+}
+.grid-wrapper .right2 {
+    grid-area: right2; 
+}
+.grid-wrapper .bottom1 {
+    grid-area: bottom1; 
+}
+.grid-wrapper .bottom2 {
+    grid-area: bottom2; 
+}

hbjc.html

@@ -0,0 +1,851 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <title>环保监测</title>
+  <link href="css/common.css" rel="stylesheet">
+  <link href="css/hbjc.css" rel="stylesheet">
+  <link href="css/scrollBar.css" rel="stylesheet">
+
+  <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
+  <script type="text/javascript" src="js/echarts.min.js"></script>
+  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
+  <script type="text/javascript" src="js/common.js"></script>
+  <script type="text/javascript" src="js/api.js"></script>
+  <script type="text/javascript" src="js/jsmpeg.min.js"></script>
+</head>
+<body>
+	<div class="header-wrapper">
+	  <div class="title">
+	  智能化综合管理平台
+	  <svg version="1.1" width="900" height='100'>
+	   <polygon points="0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0" style="fill:transparent;stroke:#69F8FE;stroke-width:2"/>
+		</svg>
+	  </div>
+	  <div class="nav-bar">
+		<a class="item " href="index.html">首页</a>
+		<a class="item " href="fzfx.html">生产管理</a>
+		<a class="item " href="swfk.html">生物防控</a>
+		<a class="item " href="spjk.html">视频监控</a>
+		<a class="item active" href="hbjc.html">环保监测</a>
+	  </div>
+	</div>
+	<div class="grid-wrapper">
+	  <div class="left1">
+		<div class="wrapper">
+		<div class='chart-tab-t'><div class="chart-tab-title">化学需氧量</div></div>
+		<div class="wrapper-content">
+			  <div class="wide-border">
+				
+			  </div>
+			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   
+			   </g>
+			   
+				</svg>
+				<svg version="1.1" width="90" height="25" class="wide-border-line2">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   </g>
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line3">
+			 
+			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line4">
+			 
+			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<div id="chart-hxxyl"></div>
+			  </div>
+		
+		</div>
+	  </div>
+	  <div class="left2">
+		<div class="wrapper">
+		<div class='chart-tab-t'><div class="chart-tab-title">氨氮</div></div>
+		<div class="wrapper-content">
+			  <div class="wide-border">
+				
+			  </div>
+			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   
+			   </g>
+			   
+				</svg>
+				<svg version="1.1" width="90" height="25" class="wide-border-line2">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   </g>
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line3">
+			 
+			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line4">
+			 
+			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<div id="chart-ad"></div>
+			  </div>
+		
+			</div>
+	  </div>
+	  <div class="center">
+
+		<div class="line1">
+		  <div class="cont datenow"></div>
+		  <div class="division"></div>	  
+		  <div class="cont">环保监测</div>
+		  <div class="division"></div>
+		   <div class="cont wether"></div>
+		</div>
+		<div class="line3" id="play-box-0">
+			
+		</div>
+		
+	  </div>
+	  <div class="right1">
+		<div class="wrapper">
+		<div class='chart-tab-t'><div class="chart-tab-title">流量</div></div>
+		<div class="wrapper-content">
+			  <div class="wide-border">
+				
+			  </div>
+			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   
+			   </g>
+			   
+				</svg>
+				<svg version="1.1" width="90" height="25" class="wide-border-line2">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   </g>
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line3">
+			 
+			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line4">
+			 
+			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<div id="chart-ll"></div>
+			  </div>
+		
+			</div>	
+	  </div>
+	  <div class="right2">
+			<div class="wrapper">
+		<div class='chart-tab-t'><div class="chart-tab-title">累计流量</div></div>
+		<div class="wrapper-content">
+			  <div class="wide-border">
+				
+			  </div>
+			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   
+			   </g>
+			   
+				</svg>
+				<svg version="1.1" width="90" height="25" class="wide-border-line2">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   </g>
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line3">
+			 
+			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line4">
+			 
+			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<div id="chart-ljll"></div>
+			  </div>
+		
+			</div>
+	  </div>
+	  <div class="bottom1">
+		<div class="wrapper">
+		<div class="chartBlock">
+			<div id='chartBottom1'>
+				<div class="chartTab-t"><div class="chartTab-title">总磷</div></div>
+				<div id="chart-zl"></div>
+			</div>
+			<div id='chartBottom2'>
+				<div class="chartTab-t"><div class="chartTab-title">总氮</div></div>
+				<div id="chart-zd"></div>
+			</div>
+			<div id='chartBottom3'>
+				<div class="chartTab-t"><div class="chartTab-title">PH</div></div>
+				<div id="chart-ph"></div>
+			</div>
+		</div>
+		</div>
+	  </div>
+	</div>
+<script>
+	var dom_hxxyl = document.getElementById("chart-hxxyl");
+	var dom_ad = document.getElementById("chart-ad");
+	var dom_ll = document.getElementById("chart-ll");
+	var dom_ljll = document.getElementById("chart-ljll");
+	var dom_zl = document.getElementById("chart-zl");
+	var dom_zd = document.getElementById("chart-zd");
+	var dom_ph = document.getElementById("chart-ph");	
+	var myChart_hxxyl = echarts.init(dom_hxxyl);
+	var myChart_ad = echarts.init(dom_ad);
+	var myChart_ll = echarts.init(dom_ll);
+	var myChart_ljll = echarts.init(dom_ljll);
+	var myChart_zl = echarts.init(dom_zl);
+	var myChart_zd = echarts.init(dom_zd);
+	var myChart_ph = echarts.init(dom_ph);
+	var app = {};
+	option_hxxyl=null,option_ad=null,option_ll=null,option_ljll=null,option_zl=null,option_zd=null,option_ph=null;
+ option_hxxyl = {
+    tooltip: {
+        formatter: '{b} : {c}mg/L'
+    },
+    series: [
+        {
+            name: '化学需氧量',
+            type: 'gauge',
+            min: 0,
+            max: 1000,
+            splitNumber: 10,
+            radius: '95%',
+			center:['50%','57%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}mg/L',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 214, name: '化学需氧量'}]
+        }
+    ]
+};
+ option_ad = {
+    tooltip: {
+        formatter: '{b} : {c}mg/L'
+    },
+    series: [
+        {
+            name: '氨氮',
+            type: 'gauge',
+            min: 0,
+            max: 10,
+            splitNumber: 10,
+            radius: '95%',
+			center:['50%','57%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}mg/L',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 1.45, name: '氨氮'}]
+        }
+    ]
+};
+ option_ll = {
+    tooltip: {
+        formatter: '{b} : {c}T/HT'
+    },
+    series: [
+        {
+            name: '流量',
+            type: 'gauge',
+            min: 0,
+            max: 1000,
+            splitNumber: 10,
+            radius: '95%',
+			center:['50%','57%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}T/HT',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 156, name: '流量'}]
+        }
+    ]
+};
+ option_ljll = {
+    tooltip: {
+        formatter: '{b} : {c}T/HT'
+    },
+    series: [
+        {
+            name: '累计流量',
+            type: 'gauge',
+            min: 0,
+            max: 10000,
+            splitNumber: 10,
+            radius: '95%',
+			center:['50%','57%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}T/HT',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 871, name: '累计流量'}]
+        }
+    ]
+};
+ option_zl = {
+    tooltip: {
+        formatter: '{b} : {c}mg/L'
+    },
+    series: [
+        {
+            name: '总磷',
+            type: 'gauge',
+            min: 0,
+            max: 10,
+            splitNumber: 10,
+            radius: '95%',
+			center:['50%','50%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}mg/L',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 2.36, name: '总磷'}]
+        }
+    ]
+};
+ option_zd = {
+    tooltip: {
+        formatter: '{b} : {c}mg/L'
+    },
+    series: [
+        {
+            name: '总氮',
+            type: 'gauge',
+            min: 0,
+            max: 50,
+            splitNumber: 10,
+            radius: '95%',
+			center:['50%','50%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}mg/L',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 3.51, name: '总氮'}]
+        }
+    ]
+};
+ option_ph = {
+    tooltip: {
+        formatter: '{b} : {c}'
+    },
+    series: [
+        {
+            name: 'PH',
+            type: 'gauge',
+            min: 0,
+            max: 14,
+            splitNumber: 10,
+            radius: '90%',
+			center:['50%','50%'],
+            axisLine: {            // 坐标轴线
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
+                    width: 3,
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            axisLabel: {            // 坐标轴小标记
+                fontWeight: 'bolder',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                    color: 'auto',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+                length: 25,         // 属性length控制线长
+                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                    width: 3,
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            pointer: {           // 分隔线
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5
+            },
+            title: {
+				show:false,
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+                    fontSize: 20,
+                    fontStyle: 'italic',
+                    color: '#fff',
+                    shadowColor: '#fff', //默认透明
+                    shadowBlur: 10
+                }
+            },
+            detail: {
+                backgroundColor: 'rgba(30,144,255,0.8)',
+                borderWidth: 1,
+				formatter: '{value}',
+                borderColor: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 5,
+                offsetCenter: [0, '50%'],       // x, y，单位px
+                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                    fontWeight: 'bolder',
+					fontSize:18,
+                    color: '#fff'
+                }
+            },
+            data: [{value: 6.7, name: 'PH'}]
+        }
+    ]
+};
+	if (option_hxxyl && typeof option_hxxyl === "object") {
+		myChart_hxxyl.setOption(option_hxxyl, true);
+	}
+	if (option_ad && typeof option_ad === "object") {
+		myChart_ad.setOption(option_ad, true);
+	}
+	if (option_ll && typeof option_ll === "object") {
+		myChart_ll.setOption(option_ll, true);
+	}
+	if (option_ljll && typeof option_ljll === "object") {
+		myChart_ljll.setOption(option_ljll, true);
+	}
+	if (option_zl && typeof option_zl === "object") {
+		myChart_zl.setOption(option_zl, true);
+	}
+	if (option_zd && typeof option_zd === "object") {
+		myChart_zd.setOption(option_zd, true);
+	}
+	if (option_ph && typeof option_ph === "object") {
+		myChart_ph.setOption(option_ph, true);
+	}
+
+	//数据配置
+	var indexDataSetParam = {
+		id:30007
+	};
+	var indexDataSetUrl = "/publics/sysconf/get";
+	getData(indexDataSetUrl,indexDataSetParam).then(res => {
+		var data = JSON.parse(res.conf.data);
+		console.log(data);
+		option_hxxyl.series[0].data[0].value = data[0].val;		
+		myChart_hxxyl.setOption(option_hxxyl, true);
+		
+		option_ad.series[0].data[0].value = data[1].val;		
+		myChart_ad.setOption(option_ad, true);
+		
+		option_ll.series[0].data[0].value = data[2].val;		
+		myChart_ll.setOption(option_ll, true);
+		
+		option_ljll.series[0].data[0].value = data[3].val;		
+		myChart_ljll.setOption(option_ljll, true);
+		
+		option_zl.series[0].data[0].value = data[4].val;		
+		myChart_zl.setOption(option_zl, true);
+		
+		option_zd.series[0].data[0].value = data[5].val;		
+		myChart_zd.setOption(option_zd, true);
+		
+		option_ph.series[0].data[0].value = data[6].val;		
+		myChart_ph.setOption(option_ph, true);
+		
+		
+	})
+	//固定视频
+	if(player1!=null){
+	///console.log(player)
+		player1.stop();
+		player1.destroy();
+		player1=null;
+	}
+	var player1=null;
+	var videoArr = 
+	["rtsp://admin:admin123@192.168.1.17:554/cam/realmonitor?channel=1&subtype=0","rtsp://admin:admin123@192.168.1.17:554/cam/realmonitor?channel=1&subtype=1"]
+	
+	$(function(){
+		console.log(sessionStorage.getItem("currIp"),sessionStorage.getItem("loginIp"))
+		currIp = currIp?currIp:sessionStorage.getItem("currIp")
+		loginIp = loginIp?loginIp:sessionStorage.getItem("loginIp")
+		lanIp = lanIp?lanIp:sessionStorage.getItem("lanIp")
+		console.log(currIp,loginIp)
+			if(currIp==loginIp){
+			//登录IP和设备IP一致
+				videoIp = lanIp
+					setTimeout(function() {
+					player1 = play(0,videoArr[0][0],"1366x768")
+					},1000)
+
+			}else{
+					//用普清
+					videoIp = currIp;
+					setTimeout(function() {
+					player1 = play(0,videoArr[0][1],"640x480")
+					},1000)					
+					
+			}
+		
+
+		
+					
+	})
+</script>
+</body>
+</html>

js/FlexoCalendar.js

@@ -0,0 +1,519 @@
+/*
+AUTHOR : ELEANOR MAO
+EMAIL : danningmao@outlook.com
+2016-02-5
+*/
++(function($){
+	'use strict';
+
+	//↓可选参数
+	var CALENDAR_OPTION = {
+		type : 'normal',//'normal','weekly','monthly'
+		id : '',//日历的id
+		className : '',//日历的样式
+		dayNames : ['日', '一', '二', '三', '四', '五', '六'],//周名
+		numbers : ['一', '二', '三', '四', '五', '六'],//数字标示
+		today : true,//是否标志今天
+		select : true,//是否单击选中
+		multi : false,//是否单击可多选
+		disOtherMonth : false,//其他月日期是否可选
+		setMonth : null,//设定月
+		setYear : null,//设定年
+		selectDate : null, //format 'yyyy-mm-dd' or 'yyyy-mm-weekn' every element can be set to 'each';
+		allowDate : null, //format [yyyy-mm-dd,yyyy-mm-dd]
+		prev: 'icon-arrow-left',//向前的按钮
+		next: 'icon-arrow-right',//向后的按钮
+		onselect: function(){},//当选中的回调函数
+		ongoprev: function(){},//当往前翻的回调函数
+		ongonext: function(){} //当往后翻的回调函数
+	}
+
+	var Calendar = function( element, options){
+		this.el = $(element);
+		this.opt = null;
+		this.date = null;
+		this.type = null;
+		this.calendar = '';
+
+		this.init(element, options);
+	}
+
+	Calendar.prototype.init = function(element, options){
+		this.date = this.getDate();
+		var options = this.opt = this.getOptions( options, this.date );
+		this.type = options.type;
+		options.target = $(element);
+		this.calendar = '<table class="flexoCalendar '+ options.className +'"  id="'+ options.id +'" cellspacing="0">';
+		this.calendar += this.bulidCH(options);
+		if( this.type == 'normal' ){
+			this.calendar += this.bulidWeekBar(options);
+			this.calendar += '</thead>';
+			this.calendar += '<tbody>';
+			this.calendar += this.bulidFull(options);
+		}
+		else if(this.type == 'weekly' ){
+			this.calendar += '</thead><tbody>';
+			this.calendar += this.bulidWeekly(options);
+		} 
+		else if(this.type == 'monthly' ){
+			this.calendar += '</thead><tbody>';
+			this.calendar += this.bulidMonthly(options);
+		}
+		this.calendar +='</tbody></table>';
+		$(element).append(this.calendar).trigger('click');
+
+		$(element).on('click', ".prev, .next", options, function(){
+			var month = $(this).data('month').split('-')[1];
+			var year = $(this).data('month').split('-')[0];
+			var allowDate = options.allowDate;
+			var calendar = '';
+			if ( $.isArray(allowDate) && (( year == allowDate[0].split('-')[0] && month == allowDate[0].split('-')[1] ) || ( year == allowDate[1].split('-')[0] && month == allowDate[1].split('-')[1])) ) return;
+			if(options.type == 'normal'){
+				calendar = Calendar.prototype.bulidFull(options, year, month);
+			}
+			else if(options.type == 'monthly'){
+				calendar = Calendar.prototype.bulidMonthly(options, year, month);
+			}
+			else if(options.type == 'weekly'){
+				calendar = Calendar.prototype.bulidWeekly(options, year, month);
+			}
+			$(options.target).find('table.flexoCalendar tbody').empty().append(calendar).trigger('el.create');			
+			Calendar.prototype.changeCH(this,options);
+
+			if( this.className == 'prev' && options.ongoprev ){
+				options.ongoprev.call(options.target, $(this).next('.current-year').data('year'), $(this).data('month'));
+			}
+			if( this.className == 'next' && options.ongonext ){
+				options.ongonext.call(options.target, $(this).next('.current-year').data('year'), $(this).data('month'));
+			}
+
+		})
+
+		if( options.select ){
+			$(element).on('click', 'table>tbody>tr>td', options, function(){
+				if( !options.multi ){
+					$(this).parents("tbody").find("td.selected").removeClass('selected');
+				}
+
+				if( options.disOtherMonth ){
+					if( this.className.split(' ')[0] != 'other-month'){ $(this).addClass('selected'); };
+				}
+				else{
+					$(this).addClass('selected');
+				}
+
+				if( options.onselect ){
+					options.onselect.call(options.target, $(this).data('time'));
+				}
+			})
+		}
+		
+	}
+
+	Calendar.prototype.bulidCH = function(options){
+		var calendar='';
+		var year = options.setYear;
+		var month = options.setMonth;
+		var prevdate = this.getPrev(year, month, this.type);
+		var nextdate = this.getNext(year, month, this.type);
+		var prev = options.prev;
+		var next = options.next; 
+		if( this.type == 'normal' ){
+			calendar +='<thead><tr class="calendar-hd"><th class="prev" data-month="'+prevdate+'"><i class="'+prev+'"></i></th><th class="current-year" data-year="'+year+'-'+this.dispose(month)+'" colspan="5">'+year+'年'+this.dispose(month)+'月</th><th class="next" data-month="'+nextdate+'"><i class="'+next+'"></i></th></tr>';
+		}
+		else if(this.type == 'weekly' ){
+			var prevMonth = prevdate.split('-')[1];
+			var prevYear = prevdate.split('-')[0];
+			var nextMonth = nextdate.split('-')[1];
+			var nextYear = nextdate.split('-')[0];
+			var prevWeek = this.forWeek(prevYear ,prevMonth);
+			var nextWeek = this.forWeek(nextYear ,nextMonth);
+			calendar +='<thead><tr class="calendar-hd"><th class="prev" data-month="'+prevdate+'" data-week="'+prevWeek+'"><i class="'+prev+'"></i></th><th class="current-year" data-year="'+year+'-'+this.dispose(month)+'" colspan="5">'+year+'年'+this.dispose(month)+'月</th><th class="next" data-month="'+nextdate+'" data-week="'+nextWeek+'"><i class="'+next+'"></i></th></tr></thead>';
+		} 
+		else if(this.type == 'monthly' ){
+			calendar +='<thead><tr class="calendar-hd"><th class="prev" data-month="'+prevdate+'" colspan="2"><i class="'+prev+'"></i></th><th class="current-year" data-year="'+year+'-'+this.dispose(month)+'" colspan="4">'+year+'年</th><th class="next" data-month="'+nextdate+'" colspan="2"><i class="'+next+'"></i></th></tr></thead>';
+		}
+
+		return calendar;
+	}
+
+	Calendar.prototype.changeCH = function(element,options){
+		var month = $(element).data('month').split('-')[1];
+		var year = $(element).data('month').split('-')[0];
+		month = parseInt(month);
+		year = parseInt(year);
+		var type = options.type;
+		var prevdate = this.getPrev(year, month, type);
+		var nextdate = this.getNext(year, month, type);
+		var crtdate = year + '-' + this.dispose(month);
+		var header = $(options.target).find(".current-year");
+		if(type == 'weekly'){
+			var prevMonth = prevdate.split('-')[1];
+			var prevYear = prevdate.split('-')[0];
+			var nextMonth = nextdate.split('-')[1];
+			var nextYear = nextdate.split('-')[0];
+			var prevWeek = this.forWeek(prevYear ,prevMonth);
+			var nextWeek = this.forWeek(nextYear ,nextMonth);
+			$(options.target).find(".prev").data('month', prevdate).attr('data-month', prevdate).data('week', prevWeek).attr('data-week', prevWeek);
+			$(options.target).find(".next").data('month', nextdate).attr('data-month', nextdate).data('week', nextWeek).attr('data-week', nextWeek);
+		}else{
+			$(options.target).find(".prev").data('month', prevdate).attr('data-month', prevdate);
+			$(options.target).find(".next").data('month', nextdate).attr('data-month', nextdate);
+		}
+
+		$(options.target).find(".current-year").data('year', crtdate).attr('data-year', crtdate);
+
+		if(type == 'monthly' ){
+			header.text(year+'年');
+		}else{
+			header.text(year+'年'+ this.dispose(month) +'月');
+		}
+	}
+
+	Calendar.prototype.bulidWeekBar = function(options){
+		var calendar = '<tr class="weekday">';
+		for(var i = 0; i < 7; i++){
+			calendar += '<th data-day=day'+i+'>'+options.dayNames[i]+'</th>';
+		}
+		calendar += '</tr></thead>';
+		return calendar;
+	}
+
+	Calendar.prototype.bulidFull = function(options, year, month){
+		var calendar = '';
+		var month = month ? parseInt(month) : parseInt(options.setMonth);
+		var year = year ? parseInt(year) : parseInt(options.setYear);
+		var prevdate = this.getPrev(year, month, 'normal');
+		var nextdate = this.getNext(year, month, 'normal');
+		var monthLen = eli.getMonthLen(year, month);
+		var prevMonthLen = eli.getMonthLen(prevdate.split('-')[0], prevdate.split('-')[1]);
+		var firDay = new Date(year,month-1,1).getDay();
+		var selectDate = options.selectDate;
+		selectDate = typeof selectDate == 'string' ? selectDate.indexOf('-') != -1 ? selectDate.split('-')  : null : null;
+		if( selectDate ){
+			selectDate[0] = selectDate[0] == 'each' ? year : parseInt(selectDate[0]);
+			selectDate[1] = selectDate[1] == 'each' ? month : parseInt(selectDate[1]);
+			selectDate[2] = selectDate[2] == 'each' ? 1 : parseInt(selectDate[2]);
+		}
+		for(var j = 0; j < 42; j++){
+			if( j % 7 == 0 && j != 41 ){
+				if( j != 0){
+					calendar +="</tr><tr>";
+				}
+				else{
+					calendar +="<tr>";
+				}
+			}
+			//当前月
+			if( j >= firDay && ( j < (firDay + monthLen)) ){
+				if( options.today ){
+					if( j == parseInt(options.crtdate) + firDay - 1 && options.realyear == year && parseInt(options.realmonth) == month){
+						if( selectDate && selectDate[0] == year && selectDate[1] == month && selectDate[2] == parseInt(options.crtdate) ){
+							calendar += '<td class="current-month current-day selected-day tdday day'+(j % 7)+'" data-time="'+year+'-'+this.dispose(month)+'-'+this.dispose((j - firDay + 1))+'"><span class="day">'+(j-firDay+1)+'</span></td>';								
+						}else{
+							calendar += '<td class="current-month current-day tdday day'+(j % 7)+'" data-time="'+year+'-'+this.dispose(month)+'-'+this.dispose((j - firDay + 1))+'"><span class="day">'+(j-firDay+1)+'</span></td>';
+						}
+					}else{
+						if( selectDate && selectDate[0] == year && selectDate[1] == month && selectDate[2] == ( j -firDay + 1 )){
+							calendar +='<td class="current-month selected-day tdday day'+(j % 7)+'" data-time="'+year+'-'+this.dispose(month)+'-'+this.dispose((j - firDay + 1))+'"><span class="day">'+(j-firDay+1)+'</span></td>';
+						}else{
+							calendar +='<td class="current-month tdday day'+(j % 7)+'" data-time="'+year+'-'+this.dispose(month)+'-'+this.dispose((j - firDay + 1))+'"><span class="day">'+(j-firDay+1)+'</span></td>';
+						}
+					}
+				}else{
+					if( selectDate && selectDate[0] == year && selectDate[1] == month && selectDate[2] == ( j -firDay + 1 )){
+						calendar +='<td class="current-month selected-day tdday day'+(j % 7)+'" data-time="'+year+'-'+this.dispose(month)+'-'+this.dispose((j - firDay + 1))+'"><span class="day">'+(j-firDay+1)+'</span></td>';
+					}else{
+						calendar +='<td class="current-month tdday day'+(j % 7)+'" data-time="'+year+'-'+this.dispose(month)+'-'+this.dispose((j - firDay + 1))+'"><span class="day">'+(j-firDay+1)+'</span></td>';
+					}
+				}
+			}	
+			//上个月
+			else if( j < firDay ){
+				if( selectDate && ( selectDate[0] + '-' + selectDate[1] ) == prevdate && selectDate[2] == (prevMonthLen - (firDay - j - 1)) ){
+					calendar +='<td class="other-month selected-day prev-month day'+(j % 7)+'" data-time="'+prevdate+'-'+this.dispose((prevMonthLen - (firDay - j - 1)))+'"><span class="day">'+(prevMonthLen - (firDay - j - 1))+'</span></td>';						
+				}else{
+					calendar +='<td class="other-month prev-month day'+(j % 7)+'" data-time="'+prevdate+'-'+this.dispose((prevMonthLen - (firDay - j - 1)))+'"><span class="day">'+(prevMonthLen - (firDay - j - 1))+'</span></td>';	
+				}
+			}
+			//下个月
+			else if( j >= (firDay + monthLen)){
+				if( selectDate && ( selectDate[0] + '-' + selectDate[1] ) == nextdate && selectDate[2] == (j - monthLen - firDay + 1) ){
+					calendar += '<td class="other-month selected-day next-month day'+(j % 7)+'" data-time="'+nextdate+'-'+this.dispose((j - monthLen - firDay + 1))+'"><span class="day">'+(j - monthLen - firDay + 1)+'</span></td>';					
+				}else{
+					calendar += '<td class="other-month next-month day'+(j % 7)+'" data-time="'+nextdate+'-'+this.dispose((j - monthLen - firDay + 1))+'"><span class="day">'+(j - monthLen - firDay + 1)+'</span></td>';					
+				}
+			}
+			
+
+		}
+		calendar +='</tr>';
+		return calendar;
+	}
+
+	Calendar.prototype.bulidWeekly = function(options, year ,month){
+		var calendar = '';
+		var numbers = options.numbers;
+		var month  = month ? parseInt(month) : parseInt(options.setMonth);
+		var year = year ? parseInt(year) : parseInt(options.setYear);
+		var prevdate = this.getPrev(year, month, 'weekly');
+		var nextdate = this.getNext(year, month, 'weekly');
+		var monthLen = eli.getMonthLen(year, month);
+		var prevMonth = prevdate.split('-')[1];
+		var nextMonth = nextdate.split('-')[1];
+		var prevMonthLen = eli.getMonthLen(prevdate.split('-')[0], prevMonth);
+		var firDay = new Date(year,month-1,1).getDay();
+		firDay = firDay == 0 ? 7 : firDay;
+		var startDay  = firDay != 1 ? prevMonthLen - firDay + 2 : 1 ;
+		var startMonth  = startDay != 1? prevMonth : month ;
+		var endDay  = parseInt(startDay) + 6 > parseInt(prevMonthLen)? parseInt(startDay) + 6 - parseInt(prevMonthLen) : parseInt(startDay) + 6;
+		var startYear  = startMonth > month ? year - 1 : year ;
+		var endYear  = startMonth == 12 ? startYear + 1 : startYear ;
+		var selectDate = options.selectDate;
+		selectDate = typeof selectDate == 'string' ? selectDate.indexOf('-') != -1 ? selectDate.split('-')  : null : null;
+		if( selectDate ){
+			selectDate[0] = selectDate[0] == 'each' ? year : parseInt(selectDate[0]);
+			selectDate[1] = selectDate[1] == 'each' ? month : parseInt(selectDate[1]);
+			selectDate[2] = selectDate[2] == 'each' ? 'week1' : selectDate[2].indexOf('week') != -1 ? selectDate[2] : parseInt(selectDate[2]);
+			if( typeof selectDate[2] == 'number'){ selectDate[2] = eli.getMonthWeek(selectDate[0], selectDate[1], selectDate[2])}
+		}
+		var crt;
+		for(var j = 0; j < 5; j++ ){
+			if( j != 0 && parseInt(startDay) >= parseInt(endDay) ){
+				if( selectDate ){
+					crt = 'week' + ( j + 1 );
+					if( ($.isArray(selectDate[2]) && (year == selectDate[2][0][0] && month == selectDate[2][0][1] && selectDate[2][0][2] == crt)) || ( year == selectDate[0] && month == selectDate[1] && selectDate[2] == crt ) ){
+						calendar += '<tr><td class="selected-week tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(nextMonth)+'/'+this.dispose(endDay)+'</span></div></td></tr>';					
+					}
+					else{
+					    calendar += '<tr><td class="tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(nextMonth)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(nextMonth)+'/'+this.dispose(endDay)+'</span></div></td></tr>';											
+					}
+				}else{
+					calendar += '<tr><td class="tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(nextMonth)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(nextMonth)+'/'+this.dispose(endDay)+'</span></div></td></tr>';					
+				}
+			}
+			else if( options.today && ( (parseInt(options.realmonth) == startMonth && startDay <= parseInt(options.crtdate)) || ( parseInt(options.realmonth) != startMonth && startDay >= parseInt(options.crtdate)) ) && parseInt(options.crtdate) <= endDay && options.realyear == year && options.realmonth == month){
+				if( selectDate ){
+					crt = 'week' + ( j + 1 );
+					if( ($.isArray(selectDate[2]) && ((year == selectDate[2][0][0] && month == selectDate[2][0][1] && selectDate[2][0][2] == crt) || ( selectDate[2][1] && year == selectDate[2][1][0] && month == selectDate[2][1][1] && selectDate[2][1][2] == crt))) ||  ( year == selectDate[0] && month == selectDate[1] && selectDate[2] == crt )  ){
+						calendar += '<tr><td class="current-week current-day selected-week tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(month)+'/'+this.dispose(endDay)+'</span></div></td></tr>';						
+					}else{
+						calendar += '<tr><td class="current-week current-day tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(month)+'/'+this.dispose(endDay)+'</span></div></td></tr>';
+					}
+				}else{
+					calendar += '<tr><td class="current-week current-day tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(month)+'/'+this.dispose(endDay)+'</span></div></td></tr>';
+				}
+			}
+			else if( selectDate ){
+				crt = 'week' + ( j + 1 );
+				if( ($.isArray(selectDate[2]) && ((year == selectDate[2][0][0] && month == selectDate[2][0][1] && selectDate[2][0][2] == crt) || ( selectDate[2][1] && year == selectDate[2][1][0] && month == selectDate[2][1][1] && selectDate[2][1][2] == crt))) ||  ( year == selectDate[0] && month == selectDate[1] && selectDate[2] == crt )  ){
+					calendar += '<tr><td class="selected-week tweek week'+(j + 1)+'" data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(month)+'/'+this.dispose(endDay)+'</span></div></td></tr>';					
+				}else{
+					calendar += '<tr><td class="tweek week'+(j + 1)+'"  data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(month)+'/'+this.dispose(endDay)+'</span></div></td></tr>';
+				}
+			}
+			else{
+				calendar += '<tr><td class="tweek week'+(j + 1)+'"  data-time="'+startYear+'-'+this.dispose(startMonth)+'-'+this.dispose(startDay)+','+endYear+'-'+this.dispose(month)+'-'+this.dispose(endDay)+'" colspan="7"><div><span class="week">第'+ numbers[j] +'周</span><span class="process">'+this.dispose(startMonth)+'/'+this.dispose(startDay)+'~'+this.dispose(month)+'/'+this.dispose(endDay)+'</span></div></td></tr>';
+			}
+
+			if( j == 0 && firDay != 1){
+				startMonth = parseInt(startMonth) + 1 > 12 ? '1' : parseInt(startMonth) + 1 ; 
+				startDay = parseInt(endDay) + 1;
+			}else{
+				startDay += 7;
+			}
+			
+			endDay = startDay + 6 > monthLen ? startDay + 6 - monthLen : startDay + 6;
+			startYear = startMonth > month ? year - 1 : year ;
+			endYear = startMonth == 12 && parseInt(endDay)<7? startYear +1  : startYear ;
+			
+		}
+		return calendar;
+
+	}
+
+	Calendar.prototype.forWeek = function (year ,month){
+		var endMonth = parseInt(month) ;
+		var year = parseInt(year) ;
+		var prevdate = this.getPrev(year, month, 'weekly');
+		var monthLen = eli.getMonthLen(year, month);
+		var prevMonth = prevdate.split('-')[1];
+		var prevMonthLen = eli.getMonthLen(prevdate.split('-')[0], prevMonth);
+		var firDay = new Date(year, month - 1, 1).getDay();
+		firDay = firDay == 0 ? 7 : firDay;
+		var startDay = firDay != 1 ? prevMonthLen - firDay + 2 : 1 ;
+		var startMonth = startDay != 1? prevMonth : month ;
+		var endDay = parseInt(startDay) + 6 > parseInt(prevMonthLen)? parseInt(startDay) + 6 - parseInt(prevMonthLen) : parseInt(startDay) + 6;
+		var startYear = parseInt(startMonth) > month ? year - 1 : year ;
+		var endYear = startMonth == 12 ? startYear + 1 : startYear ;
+		var data = startYear +'-'+ this.dispose(startMonth) + '-' +this.dispose(startDay) +',' + endYear +'-' + this.dispose(month) + '-'+ this.dispose(endDay);
+		return data;
+	}
+
+	Calendar.prototype.bulidMonthly = function(options, year ,month){
+		var calendar = '';
+		var month = month ? parseInt(month) : parseInt(options.setMonth);
+		var year = year ? parseInt(year) : parseInt(options.setYear);
+		var selectDate = options.selectDate;
+		selectDate = typeof selectDate == 'string' ? selectDate.indexOf('-') != -1 && selectDate.indexOf('week') == -1 ?  selectDate.split('-') : null : null;
+		if(selectDate){
+			selectDate[0] = selectDate[0] == 'each' ? year : parseInt(selectDate[0]);
+			selectDate[1] = selectDate[1] == 'each' ? 1 : parseInt(selectDate[1]);
+		}
+		for(var j = 0; j < 12; j++){
+			if( j % 4 == 0 && j !=12 ){
+				if( j != 0){
+					calendar +="</tr><tr>";
+				}
+				else{
+					calendar +="<tr>";
+				}
+			}
+			if( options.today && (j + 1) == options.realmonth && options.realyear == year){
+				if( selectDate && selectDate[0] == year && selectDate[1] == (j + 1)){
+					calendar += '<td colspan=2 class="current-month current-day selected-month selected-day tmonth month'+this.dispose(( j + 1 ))+'" data-time="'+year+'-'+this.dispose(( j + 1 ))+'"><span class="month">'+(j + 1)+'月</span></td>';
+				}else{
+					calendar += '<td colspan=2 class="current-month current-day tmonth month'+this.dispose(( j + 1 ))+'" data-time="'+year+'-'+this.dispose(( j + 1 ))+'"><span class="month">'+(j + 1)+'月</span></td>';
+				}
+			}else if( selectDate && selectDate[0] == year && selectDate[1] == (j + 1)){
+				calendar += '<td colspan=2 class="selected-month selected-day tmonth month'+this.dispose(( j + 1 ))+'" data-time="'+year+'-'+this.dispose(( j + 1 ))+'"><span class="month">'+(j + 1)+'月</span></td>'
+			}else{
+				calendar += '<td colspan=2 class="tmonth month'+this.dispose(( j + 1 ))+'" data-time="'+year+'-'+this.dispose(( j + 1 ))+'"><span class="month">'+(j + 1)+'月</span></td>'
+			}
+		}
+		calendar +='</tr>';
+		return calendar;
+
+	}
+
+	Calendar.prototype.getNext = function(year, month, type){
+		var nextdate;
+		if(type == 'monthly'){
+			nextdate = parseInt(year) + 1 + '-';
+		}else{
+			nextdate = parseInt(month) == 12 ? parseInt(year) + 1 + '-01' : year + '-' + this.dispose((parseInt(month) + 1));
+		}
+		return nextdate;
+	}
+
+	Calendar.prototype.getPrev = function(year, month, type){
+		var prevdate;
+		if(type == 'monthly'){
+			prevdate = parseInt(year) - 1 + '-';
+		}else{
+			prevdate = parseInt(month) == 1 ? parseInt(year) - 1 + '-12' : year + '-' + this.dispose((parseInt(month) - 1));
+		}
+		return prevdate;
+	}
+
+	Calendar.prototype.getDate = function(){
+		var now = new Date();
+		var crtdate = now.getDate();
+		var setMonth = now.getMonth() + 1 ;
+		var setYear = now.getYear() + 1900;
+		crtdate = this.dispose(crtdate);
+		setMonth = this.dispose(setMonth);
+		var date = {
+			crtdate : crtdate,
+			realmonth : setMonth,
+			setMonth : setMonth,
+			realyear : setYear,
+			setYear : setYear
+		}
+		return date;
+	}
+
+	Calendar.prototype.dispose = function(val){
+		var value = (parseInt(val)+100);
+		value=value.toString();
+		value=value.substring(1);
+		return value;
+	}
+
+	Calendar.prototype.getOptions = function(options, date){
+		if(options && typeof options == 'object'){
+			$.each(options , function(key, value){
+				if(value == void 0){
+					delete options[key];
+				}
+			})
+		}
+		var option = $.extend({target : null }, CALENDAR_OPTION, date, options);
+		return option;
+	}
+
+	var Plugin = function( option ){
+		return this.each(function(){
+			var $this = $(this);
+			var data = $this.data( 'ellie.calendar' );
+			var options = typeof option == 'object' && option;
+			if( !data ) $this.data( 'ellie.calendar', ( data = new Calendar(this, option) ) )
+		})
+	}
+
+	$.fn.flexoCalendar = Plugin;
+	$.fn.flexoCalendar.Constructor = Calendar;
+
+	var old = $.fn.flexoCalendar;
+
+  // calendarWidget no conflict
+
+	$.fn.flexoCalendar.noConflict = function () {
+	  	$.fn.flexoCalendar = old;
+    	return this;
+	}
+
+})(jQuery)
+
++(function($){
+	var root=this;
+	var eli = function(obj) {
+    	if (obj instanceof eli) return obj;
+    	if (!(this instanceof eli)) return new eli(obj);
+    	this.eliwrapped = obj;
+  	};
+
+  	root.eli = eli;
+
+	eli.getMonthLen = function(year, month){
+		var year = parseInt(year);
+		var month = parseInt(month);
+		var monthLen=[,31,28,31,30,31,30,31,31,30,31,30,31];
+		if ((month == 2)&&(year % 4 == 0)&&((year % 100 != 0)||(year % 400 == 0))){
+		  return 29;
+		}else{
+		  return monthLen[month];
+		}
+	}
+
+	eli.getMonthWeek = function(year, month, day){
+		var year = parseInt(year),
+			month = parseInt(month),
+			day = parseInt(day);
+		var that = [year, month,],
+			firDay = new Date(year, month - 1, 1).getDay(),
+			start = 1,
+			next = 8,
+			monthLen = eli.getMonthLen(year, month),
+		    nextfirDay = new Date(year , month, 1 ).getDay(),
+		    another; 
+		firDay = firDay == 0 ? 7 : firDay;
+		next = firDay == 1 ? next : ( 9 - firDay );
+		
+		for ( var i = 0; i < 5 ; i++){
+			if( start <= day && day < next){
+				that[2] = 'week' + ( i + 1 );
+			}
+			start = next ;
+			next += 7;
+			next = next > monthLen ? monthLen : next;
+		}
+		if( nextfirDay !=1 ){
+			another = [,,'week1'];
+			another[1] = month + 1 == 13 ? 1 : month + 1;
+			another[0] = another[1] == 1 ? year + 1 : year;
+		}
+		var output = [that, another];
+		return output
+	}
+})(jQuery)

js/api.js

@@ -0,0 +1,100 @@
+//接口地址
+var apiUrl = "http://121.36.134.218:8010";
+
+//组织code，获取token所用
+var orgCode = "6038a10d-de0c-4a8c-951d-35342c5fbad8";
+
+var tokenApi = "/core/auth/authByCode";
+
+var videoIp = "";
+var loginIp = "";
+var currIp = "";
+var lanIp = "";
+var sysConfUrl = "/publics/sysconf/get";
+var sysCode = "env-variable";
+function getSysconf(){
+	var sysConfParam = {
+		code:sysCode
+	};
+	getData(sysConfUrl,sysConfParam).then(res => {
+		
+		var data = JSON.parse(res.conf.data);
+
+		for(var i=0;i<data.length;++i){
+			if(data[i].key=="currIp"){
+				currIp = data[i].val;
+				sessionStorage.setItem("currIp",data[i].val);
+				continue;
+			}
+			if(data[i].key=="lanIp"){
+				lanIp = data[i].val
+				sessionStorage.setItem("lanIp",data[i].val);
+				continue;
+			}
+		}
+		
+	})
+}
+getSysconf()
+//刷新IP
+var t1 = setInterval(getSysconf,30000);
+
+function getToken(){
+	
+	$.ajax({
+		type:"POST",
+		url:apiUrl+tokenApi,
+		data:{code:orgCode},
+		dataType:"json",	
+		success:function(d){
+			loginIp = d.loginIp;
+			localStorage.setItem("token",d.token);
+			sessionStorage.setItem("loginIp",d.loginIp);
+			return d.token;
+		},
+		error:function(d){
+			return false;
+		}
+	})
+}
+getToken();
+//刷新token
+var t = setInterval(getToken,7000000);
+
+function getData(url,param,type="POST"){
+	return new Promise(function (resolve, reject) {
+	var token = localStorage.getItem("token");
+	if(!token){
+		getToken();
+		token = localStorage.getItem("token");
+	}
+	
+	$.ajax({
+		type:type,
+		url:apiUrl+url,
+		data:param,
+		dataType:"json",
+		
+		headers:{
+			"x-auth-token":token
+		},
+		success:function(res){
+			resolve(res)
+		},
+		error:function(res){
+			reject(res)
+		}
+	})
+	})
+}
+
+//播放视频
+function play(i,rtsp,videoSize) {
+	var box = document.getElementById('play-box-'+i)
+	
+	var canvas = document.createElement("canvas")
+	box.appendChild(canvas)
+	var url = 'ws://'+videoIp+':8088/?rtsp='+encodeURIComponent(rtsp)+'&videoSize='+videoSize
+	
+	return new JSMpeg.Player(url, {canvas: canvas,autoplay:true})
+}

js/bootstrap-datetimepicker.zh-CN.js

@@ -0,0 +1,16 @@
+/**
+ * Simplified Chinese translation for bootstrap-datetimepicker
+ * Yuan Cheung <advanimal@gmail.com>
+ */
+;(function($){
+	$.fn.datetimepicker.dates['zh-CN'] = {
+			days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
+			daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+			daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
+			months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
+			monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
+			today: "今天",
+			suffix: [],
+			meridiem: ["上午", "下午"]
+	};
+}(jQuery));

js/common.js

@@ -0,0 +1,45 @@
+
+function getDate(sep='-'){
+	var myDate = new Date();
+	return myDate.getFullYear()+sep+(myDate.getMonth()+1)+sep+myDate.getDate();
+}
+
+$(function (){
+var myDate = new Date();
+	
+$('.line1 .datenow').text(getDate())
+
+$(".login-content .select-input").click(function(){
+	$(".login-content .select-input .muchang-list").toggle();
+})
+$(".login-content .select-input .muchang-list li").on("click",function(){
+	var title = $(this).text();
+	$(".login-content .select-input .muchang-title").text(title);
+})
+var poly = $(".header-wrapper .title svg polygon");
+var coorddd = "0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0";//原坐标
+var t_width = $(".header-wrapper .title").width();
+var svg = $(".header-wrapper .title svg");
+var y_width = svg.attr('width');//原来的宽度
+var h_width = t_width + 280;//后来的宽度
+var c_width = h_width - y_width;//相差多少宽度
+svg.attr('width',h_width);
+
+var cood_arrs = coorddd.split(' ');
+var af_coodarrs = [];
+for(var i = 0;i<8;++i){
+	if(i>=4){
+		var cood = cood_arrs[i].split(',');
+		cood[0] = parseInt(cood[0])+c_width;//坐标相应调整相差的宽度
+		cooo = cood.join(',');
+		af_coodarrs[i] = cooo;
+	}else{
+		af_coodarrs[i] = cood_arrs[i];
+	}
+}
+var af_coods = af_coodarrs.join(' ');
+poly.attr('points',af_coods);
+//console.log(af_coods)
+
+//console.log(cood_arrs)
+})

js/fzfx.js

@@ -0,0 +1,72 @@
+var ndate=new Date;
+var year=ndate.getFullYear(); 
+var month=ndate.getMonth()+1;
+$('#calendar-dayly').flexoCalendar({
+	type: 'normal',
+	setYear: year, 
+	setMonth: month, 
+	selectDate: 'each-each-each',
+  onselect: function (date) {
+    console.log(date)
+  }
+})
+$('#calendar-weekly').flexoCalendar({
+	type: 'weekly', 
+	today: true,
+	type: 'weekly',
+  onselect: function (date) {
+    console.log(date)
+  }
+	})
+$('#calendar-monthly').flexoCalendar({
+  type: 'monthly',
+  onselect: function (date) {
+    console.log(date)
+  }
+})
+
+var $calendarTabs = $('#calendarTabs')
+var $calendarWrapper = $('#calendarWrapper')
+$calendarTabs.on('click', '.tab', function () {
+  $calendarTabs.find('.tab').removeClass('active')
+  $(this).addClass('active')
+  $('#calendarWrapper .calendar-wrapper').hide().eq($(this).index()).show()
+})
+//表格显示
+$('#chartLeft1').click(function(){
+	$('.left-side-table').toggle();
+})
+$('.left-side-table').click(function(){
+	$('.left-side-table').toggle();
+	
+})
+$(document).bind("click", function(){
+        $('#chartBottom1 .choosebox').hide();
+})
+$("#chartBottom1 .choosepc").click(function(){
+	$('#chartBottom1 .choosebox').toggle();
+	event.stopPropagation();
+})
+$("#chartBottom1 .choosebox").click(function(){
+	
+	event.stopPropagation();
+})
+$('.tab-areas .item').click(function(){
+	var type = $.trim($(".switch-bt-active").text());
+	var item = $.trim($(this).text());
+	
+	if(type =='区域'){
+		var build = $('select[name="build"]').val();
+		$('.choosepc .choose-item').text(type+':'+build+'-'+item);
+	}else{
+		$('.choosepc .choose-item').text(type+':'+item);
+	}
+	$('#chartBottom1 .choosebox').hide();
+})
+$(".a_demo_two").click(function(){
+	var i = $(this).index('.a_demo_two');
+	$(".a_demo_two").removeClass('switch-bt-active');
+	$(this).addClass('switch-bt-active');
+	$('.tab-areas .tab-area').addClass('tabshow');
+	$(".tab-areas .tab-area").eq(i).removeClass('tabshow');
+})

js/hbjc.js

@@ -0,0 +1,8 @@
+$(".video-controler .video-block").click(function(){
+	$('.choose-videoBox .control-box1').toggle();
+})
+$(".video-find #sub-btn").click(function(){
+	$('.choose-videoBox .control-box1').hide();
+	console.log('录像查询');
+	
+})

js/index.js

@@ -0,0 +1,546 @@
+
+//实时温湿度曲线
+$(".single .list").delegate("li","click",function(event){
+	//var target = $(event.target);
+	var i = $(this).attr("build-index");
+	var title = $(this).find('.room_num').text();
+	var deviceId = $(this).attr("device-id");
+	$(".window-ssqx .window-title").text(title)
+	$(".window-ssqx").show();
+	myChart_ssqx.resize();
+	var date = new Date();
+	var fromDate = date.setHours(0,0,0,0)/1000;
+	var toDate = date.setHours(24,0,0,0)/1000;
+	if(deviceId != ''){
+		var date = new Date();
+		var getTempLineUrl="/analyse/hm/device/history/by-device-id";
+		var getTempLineParam={
+			deviceId:deviceId,
+			type:1,
+			fromDate:fromDate,
+			toDate:toDate		
+		}
+		var getHumiLineParam={
+			deviceId:deviceId,
+			type:2,
+			fromDate:fromDate,
+			toDate:toDate
+			
+		}
+		
+		//
+		var xAxis = [];
+		var nowHour = moment.getHours();
+		for(var i=0;i<=nowHour;++i){
+			xAxis[i] = (i<10?"0"+i:i)+":00";
+		}
+		
+		var humiArr = [];
+					
+		var series = [];
+		
+		
+		option_ssqx.series = series;
+			
+		myChart_ssqx.setOption(option_ssqx, true);
+		getData(getTempLineUrl,getTempLineParam,"GET").then(res => {
+			var xAxis = [];
+			
+			var contentlen = res.content!=undefined?res.content.length:0;
+			var tempChannel = [];//构建多路温度曲线
+			for(var i=0;i<contentlen;++i){
+				var d = new Date(res.content[i].created)
+				var h = d.getHours();
+				var m = d.getMinutes();
+				var oneXaxis = (h<10?"0"+h:h)+":"+(m<10?"0"+m:m)
+				
+				if(xAxis.indexOf(oneXaxis)<0){
+					xAxis.push(oneXaxis);
+				}
+				
+				var channelNo = 'channel-'+res.content[i].channelNo;
+				if(tempChannel[channelNo]==undefined){
+					tempChannel[channelNo] = [];
+					//多路温度传感器
+				}
+					tempChannel[channelNo].push({
+						value:res.content[i].value,
+						name:'℃('+channelNo+')'
+					})			
+			}
+			
+			for(var k in tempChannel){
+				
+				var seriesData = {
+					name:'温度',
+					type:'line',					
+					smooth: true,
+					data:tempChannel[k],				
+					lineStyle:{ 
+						normal:{
+							color:'#ef1a0f'  
+						}
+					} 
+										
+				}
+				series.push(seriesData);
+			}
+			option_ssqx.xAxis.data = xAxis.reverse();
+			option_ssqx.series = series;
+			console.log(xAxis)
+			myChart_ssqx.setOption(option_ssqx, true);
+			
+		})
+		getData(getTempLineUrl,getHumiLineParam,"GET").then(res => {
+			var xAxis = [];
+			var contentlen = res.content!=undefined?res.content.length:0;
+			var humiChannel = [];//构建多路湿度曲线
+			for(var i=0;i<contentlen;++i){
+				var d = new Date(res.content[i].created)
+				var h = d.getHours();
+				var m = d.getMinutes();
+				var oneXaxis = (h<10?"0"+h:h)+":"+(m<10?"0"+m:m)
+				
+				if(xAxis.indexOf(oneXaxis)<0){
+					xAxis.push(oneXaxis);
+				}
+				var channelNo = 'channel-'+res.content[i].channelNo;
+				if(humiChannel[channelNo]==undefined){
+					humiChannel[channelNo] = [];
+					//多湿度传感器
+				}
+					humiChannel[channelNo].push({
+						value:res.content[i].value,
+						name:'RH('+channelNo+')'
+					})			
+			}
+			for(var k in humiChannel){	
+				var seriesData = {
+					name:'湿度',
+					type:'line',					
+					smooth: true,
+					data:humiChannel[k],				
+					lineStyle:{ 
+						normal:{
+							color:'#0fc6ef'  
+						}
+					} 
+										
+				}
+				series.push(seriesData);
+			}
+			//console.log(series)
+			option_ssqx.series = series;
+			option_ssqx.xAxis.data = xAxis.reverse();
+			console.log(xAxis)
+			myChart_ssqx.setOption(option_ssqx, true);
+		})
+	}			
+})
+$("#dataSet").click(function(){
+	//$(".windows-dataset").show();
+	
+})
+
+//播放器
+var player=null;
+$(".open-box-container").on('click',function(){
+	$(this).hide();
+	if(player!=null){
+		player.stop();
+		player.destroy()
+		player=null;
+	}
+	
+})
+
+
+//ESC 关闭layer弹窗
+	$(window).keyup(function (e) {
+		if (e.keyCode == 27) {			
+			$(".open-box-container").hide();
+			
+			if(player!=null){
+				///console.log(player)
+				player.stop();
+				player.destroy();
+				player=null;
+			}	
+		}
+	});
+$(".open-lauer-box").on('click',function(){
+	event.stopPropagation();
+})
+//地图热点
+var img_width = $(".img_window").width();
+var img_height = $(".img_window").height();
+$("#diagonal").attr('width',img_width+'px');
+$("#diagonal").attr('height',img_height+'px');
+
+var videoDevice = [1,2,4,5,10,11,13,14,21,24,26,33,34,42,45,46,47,48];
+var tempDevice = [0,2,5,6,8,13,21,24,26];
+
+$("#img_map").delegate("area","click",function(event){
+				
+				var canvers = document.getElementById("diagonal");//为了区域现形做一个画布
+				 var context = canvers.getContext("2d");
+				 context.globalAlpha = 0.5;
+				 context.clearRect(0, 0, 1010, 468);
+                 var target = $(event.target);               
+				var i = target.index();
+				console.log(i)
+				var n = videoDevice.indexOf(i);//是否有视频设备
+				var m = tempDevice.indexOf(i);//是否有监测设备
+				
+				if(n>=0){
+					//有视频
+					var title = target.attr('title');
+					var channel = target.attr('channel-data');
+					$(".windows-spjk .window-title").text(title);
+					$(".windows-spjk").show();
+					//获取设备信息					
+					//监控设备
+					var d = JSON.parse(channel);
+					if(currIp==loginIp){
+					//登录IP和设备IP一致
+							
+						videoIp = lanIp
+						player = play(0,d[0].rtsp,d[0].size);
+							
+					}else{
+						//用普清
+						videoIp = currIp;
+								
+						player = play(0,d[1].rtsp,d[1].size)
+					}
+
+				}
+				if(m>=0){
+					//有监测
+					$(".single .list li").removeClass('select')
+					$(".single .list li.buildEnv-"+m).addClass('select')
+					//15S后移除
+					setTimeout(function(){
+						$(".single .list li").removeClass('select');
+						context.clearRect(0, 0, 1130, 476);
+					},15000)
+				}
+				
+				context.beginPath();
+                    var strs = new Array(); //定义一数组
+					var coords = target.attr('coords');
+					coords=coords.replace("\"","");
+					coords=coords.replace("\"","");
+                    strs = coords.split(",");
+					//console.log(strs);
+                    var i1, i2;
+                    for (var i = 0; i < strs.length; i++) {
+						//console.log(strs[i])
+                        if (i % 2 == 0) {
+                            i1 = strs[i];
+                        }
+                        if (i % 2 == 1) {
+                            i2 = strs[i];
+                            if (i == 1) {
+                                context.moveTo(i1, i2);
+                            }
+                            else {
+                                context.lineTo(i1, i2);
+                            }
+                        }
+                    }
+                    context.fillStyle = "#f00";
+                    context.fill();
+					//console.log(context);
+                    context.closePath(); //闭合
+})
+
+/**
+  * 小数保留n位，四舍五入
+  * @param  {[type]} decimal [十进制小数]
+  * @param  {[type]} n       [保留小数点后有效位]
+  * @return {[type]}         [十进制保留小数点后n位]
+  */
+function decimal_common(decimal,n){
+	var pv = Math.pow(10,n);
+	return Math.round(decimal*pv)/pv;
+}
+/**
+ * [根据比例系数数组重新计算位置坐标coords]
+ * @param  {[type]} class_      [area的class]
+ * @param  {[type]} ratio_Array [area的比例系数数组]
+ * @param  {[type]} shape       [area的shape属性]
+ * @param  {[type]} radius      [area为circle时的半径]
+ * @return {[type]}             [description]
+ */
+function reCoords_(class_,ratio_Array,shape,radius){
+	var picw = $("#pic").width(); //当前图片的宽度
+	var pich = $("#pic").height(); //当前图片的高度
+	if(shape=="rect"){
+		//根据每个area标签的位置比例系数计算出新的坐标位置
+		var xy_arr = ratio_Array.map(function(item,index){
+			if(index % 2 === 0){ //X坐标值
+			//console.log(picw)
+				return parseInt(picw*item);
+			}else{ //Y坐标值
+				return parseInt(pich*item);
+			}	
+	 	});
+		var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
+	 	$("."+class_).attr("coords",'"'+xy_str+'"');
+	}else if(shape=="poly"){
+		//根据每个area标签的位置比例系数计算出新的坐标位置
+		//console.log(picw)
+		var xy_arr = ratio_Array.map(function(item,index){
+			if(index % 2 === 0){ //X坐标值
+				return parseInt(picw*item);
+			}else{ //Y坐标值
+				return parseInt(pich*item);
+			}	
+	 	});
+		var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
+	 	$("."+class_).attr("coords",'"'+xy_str+'"');
+	}else if(shape=="circle"){
+		//根据每个area标签的位置比例系数计算出新的坐标位置
+		var xy_arr = ratio_Array.map(function(item,index){
+			if(index == 0){ //X坐标值
+				return parseInt(picw*item);
+			}else if(index == 1){ //Y坐标值
+				return parseInt(pich*item);
+			}else{
+				return parseInt(radius*item);
+			}
+	 	});
+		var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
+	 	$("."+class_).attr("coords",'"'+xy_str+'"');
+	}				
+}
+//热点图片自适应坐标
+var oldPicW = 1130; //原始图片宽
+var oldPicH = 476; //原始图片高
+/********************************计算area标签的位置比例系数************************************/
+	//获取map标签里的所有area标签
+	var $area = $("#buildmap").find("area");
+	$.each($area,function(index,data){
+		var shape = $(data).attr("shape"); //获取area标签的shape属性（矩形rect，圆形circle，多边形poly）
+		var coordsArray  = $(data).attr("coords").replace(/\"/g,"").split(","); //将area标签的coords转换成数组
+		var class_ = $(data).attr("class"); //获取area标签的class属性
+		if(shape=="rect"){ //矩形rect
+			//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
+			var coords_Array = [],ratio_Array = []; //coords_Array用于存放根据coords计算出来的比例系数数组
+			for(var j=0,len=coordsArray.length;j<len;j++){
+				if(j % 2 === 0){ //X坐标值
+					coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
+				}else{ //Y坐标值
+					coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
+				}
+			}
+			//ratio_Array作为比例系数数组形参重新计算位置坐标
+			ratio_Array = coords_Array.concat(ratio_Array);
+			reCoords_(class_,ratio_Array,shape,0);
+			$(window).resize(function() {
+			 	reCoords_(class_,ratio_Array,shape,0);
+			});
+		}else if(shape=="poly"){ //多边形poly
+			//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
+			
+			var coords_Array = [],ratio_Array = [];
+			for(var j=0,len=coordsArray.length;j<len;j++){
+				if(j % 2 === 0){ //X坐标值
+					coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
+				}else{ //Y坐标值
+					coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
+				}
+			}
+			ratio_Array = coords_Array.concat(ratio_Array);
+			reCoords_(class_,ratio_Array,shape,0);
+			$(window).resize(function() {
+			 	reCoords_(class_,ratio_Array,shape,0);
+			});
+		}else if(shape=="circle"){ //圆形circle
+			//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
+			var coords_Array = [],ratio_Array = [];
+			for(var j=0;j<2;j++){ //圆只有两个坐标值和一个半径，半径以最大的比率去缩放
+				if(j % 2 === 0){ //X坐标值
+					coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
+				}else{ //Y坐标值
+					coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
+				}
+			}
+			coords_Array.push(coords_Array[0]>=coords_Array[1]?coords_Array[0]:coords_Array[1]);//设置半径的比率
+ 
+ 
+			ratio_Array = coords_Array.concat(ratio_Array);
+			reCoords_(class_,ratio_Array,shape,coordsArray[2]);
+			$(window).resize(function() {
+			 	reCoords_(class_,ratio_Array,shape,coordsArray[2]);
+			});
+		}
+	});
+
+	
+	
+	
+	////////////////////////////////////////////////
+	let step = 0.1;
+    let INNER = false;
+	let SCALE = 1;
+    /*function $(select) {
+      return document.querySelector(select);
+    }*/
+    // 鼠标相对页面的位置
+    function getMousePos(event) {
+      let e = event || window.event;
+      let scrollX =
+        document.documentElement.scrollLeft || document.body.scrollLeft;
+      let scrollY =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      let x = e.pageX || e.clientX + scrollX;
+      let y = e.pageY || e.clientY + scrollY;
+      //alert('x: ' + x + '\ny: ' + y);
+      return { x: x, y: y };
+    }
+    function getElementPosition(select) {
+      let dom = document.querySelector(select);
+      let scrollX =
+        document.documentElement.scrollLeft || document.body.scrollLeft;
+      let scrollY =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      let rect = dom.getBoundingClientRect();
+      let x = scrollX + dom.getBoundingClientRect().left;
+      let y = scrollY + dom.getBoundingClientRect().top;
+      let height = dom.getBoundingClientRect().height;
+      let width = dom.getBoundingClientRect().width;
+      return { x: x, y: y, height: height, width: width };
+    }
+    function mouseIndom(event) {
+      let mouseMsg = getMousePos(event);
+      let domMsg = getElementPosition('#img_map');
+      let flagX = mouseMsg.x > domMsg.x && mouseMsg.x < domMsg.x + domMsg.width;
+      let flagY =
+        mouseMsg.y > domMsg.y && mouseMsg.y < domMsg.y + domMsg.height;
+      if (flagX && flagY) {
+        //console.log('鼠标位于元素里面啦！');
+        return true;
+      } else {
+        //console.log('鼠标位于元素外面拉！');
+        return false;
+      }
+    }
+    // 文档鼠标移动
+    document.onmousemove = function(event) {
+      INNER = mouseIndom(event);
+      //console.log(INNER)
+    };
+    if (window.addEventListener)
+      //FF,火狐浏览器会识别该方法
+      window.addEventListener('DOMMouseScroll', wheel, { passive: false });
+    window.onmousewheel = document.onmousewheel = wheel; //W3C
+    //统一处理滚轮滚动事件
+    function wheel(event) {
+		//console.log(mouseIndom(event));
+      var delta = 0;
+      if (!event) event = window.event;
+      if (event.wheelDelta) {
+        //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
+        delta = event.wheelDelta / 120;
+        if (window.opera) delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
+      } else if (event.detail) {
+        //FF浏览器使用的是detail,其值为“正负3”
+        delta = -event.detail / 3;
+      }
+	  
+      if (delta) handle(delta, event);
+    }
+    //上下滚动时的具体处理函数
+    function handle(delta, event) {
+	
+      if (INNER) {
+        if (delta < 0) {
+          //向下滚动
+          console.log('向下滚动');
+          let scale =
+            Number.parseFloat(document.querySelector('#box').style.transform.replace('scale(', '')) +
+            step;
+			if(scale>5){
+				return;
+			}
+		  SCALE = scale;
+          document.querySelector('#box').style.webkitTransform = 'scale(' + scale + ')';
+		  
+          //$('#box').innerText = '缩小了' + scale;
+        } else {
+          //向上滚动
+          console.log('向上滚动');
+		  
+          let scale =
+            Number.parseFloat(document.querySelector('#box').style.transform.replace('scale(', '')) -
+            step;
+			if(scale<1){
+				return;
+			}
+			SCALE = scale;
+          document.querySelector('#box').style.webkitTransform = 'scale(' + scale + ')';
+          //$('#box').innerText = '放大了' + scale;
+        }
+        //event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+    }
+	 window.onload=function() {
+    var disX = disY = 0;                         // 鼠标距离div的左距离和上距离
+    var div1 = document.getElementById("box");  // 得到div1对象
+     
+    // 鼠标按下div1时
+    div1.onmousedown = function(e) {
+		
+        var evnt = e || event;                   // 得到鼠标事件
+        disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left
+		console.log("evnt.clientX:"+evnt.clientX)
+		console.log("box.offsetLeft:"+div1.offsetLeft)
+        disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top
+        if($("#box").css("transform") == "matrix(1, 0, 0, 1, 0, 0)" && $("#box").css("left")=="0px" && $("#box").css("top")=="0px"){
+			return;
+		}
+        // 鼠标移动时
+        document.onmousemove = function(e) {
+			
+			
+            var evnt = e || event;
+            var x = evnt.clientX - disX;
+            var y = evnt.clientY - disY;
+            //var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
+            //var window_height = document.documentElement.clientHeight - div1.offsetHeight;
+             
+            //x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时
+            //x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时
+            //y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时
+            //y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时
+             
+            div1.style.left = x + "px";
+            div1.style.top  = y + "px";
+        };
+         
+        // 鼠标抬起时
+        document.onmouseup = function() {
+            document.onmousemove =null;
+            document.onmouup = null;
+        };
+         
+        return false;
+    };
+	$("#box").on('dblclick',function(e){
+		//双击还原
+		div1.style.webkitTransform = 'scale(1)';
+		div1.style.left = "0px";
+        div1.style.top  = "0px";
+		//INNER = false;
+		document.onmousemove = function(event) {
+		  INNER = mouseIndom(event);
+		  console.log(INNER)
+		};
+	});
+};
+	
+	

js/jkfx.js

@@ -0,0 +1,54 @@
+$(".change-pc").click(function(){
+	$('.choosebox').toggle();
+	event.stopPropagation();
+})
+$(document).bind("click", function(){
+    $('.choosebox').hide();
+	$('.choose-videoBox .control-box1').hide();
+})
+$(".choosebox").click(function(){
+	event.stopPropagation();
+})
+$('.tab-areas .item').click(function(){
+	
+	var type = $.trim($(".switch-bt-active").text());
+	
+	var item = $.trim($(this).text());
+	$('.for-click-show .change-pc .title').text(type);
+	if(type =='区域'){
+		var build = $('select[name="build"]').find("option:selected").text();
+		$('.change-pc .click-check').text(build+'-'+item);
+	}else{
+		$('.change-pc .click-check').text(item);
+	}
+	$('.for-click-show .choosebox').hide();
+})
+$(".a_demo_two").click(function(){
+	var i = $(this).index('.a_demo_two');
+	$(".a_demo_two").removeClass('switch-bt-active');
+	$(this).addClass('switch-bt-active');
+	$('.tab-areas .tab-area').addClass('tabshow');
+	$(".tab-areas .tab-area").eq(i).removeClass('tabshow');
+})
+$('.msg-tab-head .msg-tab1').click(function(){
+	var i = $(this).index('.msg-tab-head .msg-tab1');
+	$('.msg-tab-head .msg-tab1').removeClass('active');
+	$(this).addClass('active');
+	$('.msg-tab-body .msg-list-content').removeClass('active');
+	$(".msg-tab-body .msg-list-content").eq(i).addClass('active');
+	
+})
+$(".video-controls").click(function(){
+	var i = $(this).index('.video-controls');
+	$('.choose-videoBox .control-box1').not(":eq("+i+")").hide();
+	$('.choose-videoBox .control-box1').eq(i).toggle();
+	event.stopPropagation();
+})
+$(".choose-videoBox .tab-videocontrol").click(function(){
+	event.stopPropagation();
+});
+$(".video-find #sub-btn").click(function(){
+	$('.choose-videoBox .control-box1').hide();
+	console.log('录像查询');
+	
+})

js/scroll.js

@@ -0,0 +1,129 @@
+(function($) {
+    var timers = [];
+    function nextMove(obj, step) {
+        obj.find("ul").animate({
+            marginLeft: -step
+        },
+        300, 'swing',
+        function() {
+            $(this).find("li").slice(0, 1).appendTo($(this));
+            $(this).css("margin-left", 0);
+        });
+    }
+    function preMove(obj, step) {
+        var ul = obj.find("ul");
+        ul.css('margin-left', -step);
+        ul.find("li").last().prependTo(ul);
+        ul.animate({
+            marginLeft: 0
+        },
+        300, 'swing',
+        function() {
+            ul.css("margin-left", 0);
+        });
+    }
+    function downMove(obj, step) {
+        obj.find("ul").animate({
+            marginTop: -step
+        },
+        300, 'swing',
+        function() {
+            $(this).find("li").slice(0, 1).appendTo($(this));
+            $(this).css("margin-top", 0);
+        });
+    }
+    function upMove(obj, step) {
+        var ul = obj.find("ul");
+        ul.find("li").last().prependTo(ul);
+        ul.css('margin-top', -step);
+        ul.animate({
+            marginTop: 0
+        },
+        300, 'swing',
+        function() {
+            ul.css("margin-top", 0);
+        });
+    }
+    var methods = {
+        init: function(options) {
+            var defaults = {
+                speed: 3000,
+                direction: 'horizantal'
+            };
+            var opts = $.extend({},
+            defaults, options);
+            return this.each(function(i) {
+                var speed = opts["speed"] < 1000 ? 3000 : opts["speed"];
+                var direction = opts["direction"] == 'vertical' || opts["direction"] == 'horizantal' ? opts["direction"] : 'vertical';
+                var _this = $(this);
+                var ul = _this.find("ul"),
+                pre = _this.find(".pre"),
+                next = _this.find(".next");
+                var sh, isMove, ishori, move, lmove, rmove;
+                if (direction == 'horizantal') {
+                    isMove = _this.width() < ul.width();
+                    ishori = true;
+                    move = nextMove;
+                    lmove = preMove;
+                    rmove = nextMove;
+                    sh = ul.find("li:first").outerWidth(true);
+                } else {
+                    isMove = _this.height() < ul.height();
+                    ishori = false;
+                    move = downMove;
+                    lmove = upMove;
+                    rmove = downMove;
+                    sh = ul.find("li:first").outerHeight(true);
+                }
+                if (isMove) {
+                    timers[i] = setInterval(function() {
+                        move(_this, sh);
+                    },
+                    speed);
+                    _this.hover(function() {
+                        clearInterval(timers[i]);
+                    },
+                    function() {
+                        timers[i] = setInterval(function() {
+                            move(_this, sh);
+                        },
+                        speed);
+                    });
+                    pre.click(function() {
+                        lmove(_this, sh);
+                    });
+                    next.click(function() {
+                        rmove(_this, sh);
+                    });
+                }
+            });
+        },
+        destroy: function() {
+            return this.each(function(i) {
+                _this = $(this);
+                clearInterval(timers[i]);
+                _this.find('ul').css({
+                    'margin-top': 0
+                });
+                _this.find('ul').css({
+                    'margin-left': 0
+                });
+                _this.unbind("mouseenter").unbind("mouseleave");
+                _this.find('.pre').unbind('click');
+                _this.find('.next').unbind('click');
+            });
+        }
+    }
+    $.fn.mySingleScroll = function(options) {
+        var method = arguments[0];
+        if (methods[method]) {
+            method = methods[method];
+        } else if (typeof method == 'object' || !method) {
+            method = methods.init;
+        } else {
+            $.error('error');
+            return this;
+        }
+        return method.apply(this, arguments);
+    }
+})(jQuery)

js/spjk.js

@@ -0,0 +1,105 @@
+$('.tab-list').delegate(".build-tab","click",function(event){
+	var target = $(event.target);
+	$('.tab-list .build-tab').removeClass('active');
+	target.addClass('active');
+	
+})
+var players = [];
+
+
+//var d = JSON.parse(res.content[0].meta.channel);
+//	play1 = play(d[0].rtsp,d[0].size)
+	
+var getListUrl = "/device/device/list";
+
+
+//区域信息
+var areaParam = {
+	parentId:"738719738515689472",
+	hasSub:false
+};
+var areaUrl = "/publics/treenode/listNodeByParent";
+getData(areaUrl,areaParam).then(res => {
+	
+	var l = res.length;
+	var h = "";
+	for(var i=0;i<l;++i){
+		h+="<li node-id='"+res[i].id+"'>"+res[i].nodeName+"</li>";
+	}
+	$("#areaList").html(h);
+})
+
+//获取栋舍
+function getBuild(id){
+	var getNodeParam = {
+		parentId:id,
+		hasSub:false
+	}
+	var getNodeUrl = "/publics/treenode/listNodeByParent";
+	
+	getData(getNodeUrl,getNodeParam).then(res => {
+		var l = res.length;
+		var h = "";
+		for(var i=0;i<l;++i){
+			h+="<li node-id='"+res[i].id+"'>"+res[i].nodeName+"</li>";
+		}
+		$("#deviceList").html(h);
+	})
+}
+//获取栋舍的设备
+function getDevice(areaId){
+		var getdeviceParam = {
+			areaId:areaId
+		};
+		var getdeviceUrl = "/device/device/listByAreaId";
+		getData(getdeviceUrl,getdeviceParam,"GET").then(res => {
+			
+				var r = res.length;
+				var h="";
+				var t=0;
+				var channel = [];
+				for(var j = 0;j<r;++j){
+					if(res[j].categoryId=="738713612176855040"){
+						
+						//监控设备
+						//$("#buildmap area").eq(n).attr("device-id",res[j].deviceId);
+						var d = JSON.parse(res[j].meta.channel);
+						channel.push(d);
+						h += showVideo(res[j],t);
+						++t;
+						continue;
+					}
+					
+				}
+				$(".video-windows").html(h);
+				for(var j=0;j<t;++j){
+					
+					if(currIp==loginIp){
+						//登录IP和设备IP一致
+						videoIp = lanIp
+						players.push(play(j,channel[j][0].rtsp,channel[j][0].size));
+						
+					}else{
+						//用普清
+						videoIp = currIp;
+						console.log(channel[j][1].rtsp,channel[j][1].size)
+						players.push(play(j,channel[j][1].rtsp,channel[j][1].size))
+					}
+					
+				}
+			//}			
+		})
+}
+	
+function showVideo(data,j){
+	var d = JSON.parse(data.meta.channel);
+	var html = "";
+	html+= "<div class='video-play1'><div class='video-play1-container'>"
+	html+= "<div class='tab'><span class='tab-title'>"+data.name+"</span></div>"
+	html+= "<div class='video'><svg version='1.1' width='37' height='25' class='wide-border-line1'>"
+	html+= "<g transform='translate(0.5 0.5)'><polyline points='0,24.5 0,0 37,23.5 ' style='fill:#0E1E51;stroke:#53BAFD;stroke-width:1'/>"
+	html+= "</g></svg><svg version='1.1' width='160' height='25' class='wide-border-line2'><g transform='translate(0.5 0.5)'>"
+	html+= "<polyline points='160,25 135,0 25,0 -1,23.5' style='fill:#0E1E51;stroke:#53BAFD;stroke-width:1'/></g></svg>"
+	html+= "<div id='play-box-"+j+"' class='playerbox'></div></div></div></div>";				
+	return html;
+}

js/spzs.js

@@ -0,0 +1,32 @@
+$(".right-tabs .log-tab").on('click',function(){
+	var i = $(this).index(".right-tabs .log-tab");
+	$(".right-tabs .log-tab").removeClass("active");
+	$(this).addClass("active");	
+	$(".right-logs .log-list").hide();
+	$(".right-logs .log-list").eq(i).show();
+})
+$(".bottom2").click(function(){
+        $(this).find(".wrapper.is-visible").toggle();
+		$(this).find(".wrapper.tableb").toggle();
+    
+})
+$(".bottom3").click(function(){
+        $(this).find(".wrapper.is-visible").toggle();
+		$(this).find(".wrapper.tableb").toggle();
+    
+})
+function switchToggle(){
+	event.stopPropagation();
+	$(".swtichBtn .choosebox").toggle();
+}
+$(document).bind("click", function(){
+    $('.choosebox').hide();
+	$('.choose-videoBox .control-box1').hide();
+})
+$("#tab-area1 .pc-nums").delegate(".item","click",function(event){
+	var target = $(event.target);
+	var pc = $.trim(target.text());
+	$(".pc-data").text(pc);
+	$(".swtichBtn .choosebox").hide();
+	event.stopPropagation();
+})

js/xtsz.js

@@ -0,0 +1,6 @@
+$('.left-barge').delegate(".build-name","click",function(event){
+	var target = $(event.target);
+	$('.left-barge .build-name').removeClass('active');
+	target.addClass('active');
+	
+})

js/yzfx.js

@@ -0,0 +1,21 @@
+function switchToggle(){
+	$(".swtichBtn .choosebox").toggle();
+	event.stopPropagation();
+}
+$(document).bind("click", function(){
+    $('.swtichBtn .choosebox').hide();
+	
+})
+$("#tab-area1 .pc-nums").delegate(".item","click",function(event){
+	var target = $(event.target);
+	var pc = $.trim(target.text());
+	$(".pc-data").text(pc);
+	$(".swtichBtn .choosebox").hide();
+	event.stopPropagation();
+})
+$("#chart-yfzrlfb").on('click',function(){
+	$("#table-yfzrlfb").toggle();
+})
+$("#table-yfzrlfb").on('click',function(){
+	$(this).toggle();
+})

spjk.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <title>视频监控</title>
+  <link href="css/common.css" rel="stylesheet">
+  <link href="css/spjk.css" rel="stylesheet">
+  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
+  <script type="text/javascript" src="js/api.js"></script>
+  <script type="text/javascript" src="js/jsmpeg.min.js"></script>
+</head>
+<body>
+	<div class="header-wrapper">
+	  <div class="title">
+	  智能化综合管理平台
+	  <svg version="1.1" width="900" height='100'>
+	   <polygon points="0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0" style="fill:transparent;stroke:#69F8FE;stroke-width:2"/>
+		</svg>
+	  </div>
+	  <div class="nav-bar">
+		<a class="item " href="index.html">首页</a>
+		<a class="item " href="fzfx.html">生产管理</a>
+		<a class="item" href="swfk.html">生物防控</a>
+		<a class="item active" href="spjk.html">视频监控</a>
+		<a class="item" href="hbjc.html">环保监测</a>
+	  </div>
+	</div>
+	<div class='video-content'>
+		<div class='tab-list'>
+			
+			<div class="select dowebok">
+				<span class="placeholder">请选择分区</span>
+				<ul id="areaList">
+					
+				</ul>
+			</div>
+			<div class="select dowebok">
+				<span class="placeholder">请选择栋舍</span>
+				<ul id="deviceList">
+					
+					
+				</ul>
+			</div>
+		</div>
+		<div class='video-box'>
+			<div class='video-wrapper'>
+				<div class='video-wrapper-head'>请选择栋舍</div>
+				<div class='video-windows'>
+					<div class='video-play1'>
+						<div class='video-play1-container'>
+						<div class="tab"><span class="tab-title">通道一</span></div>
+						
+						<div class='video'>
+						<svg version="1.1" width="37" height="25" class="wide-border-line1">
+						  <g transform="translate(0.5 0.5)">
+						   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0E1E51;stroke:#53BAFD;stroke-width:1"/>
+						   
+						   </g>
+						   
+							</svg>
+							<svg version="1.1" width="160" height="25" class="wide-border-line2">
+						  <g transform="translate(0.5 0.5)">
+						   <polyline points="160,25 135,0 25,0 -1,23.5" style="fill:#0E1E51;stroke:#53BAFD;stroke-width:1"/>
+						   </g>
+							</svg>
+							<div id="play-box" class="playerbox">
+							</div>
+						</div>
+						</div>
+					</div>					
+				</div>
+				
+				
+			</div>
+				
+			
+		</div>
+	</div>
+	 <script type="text/javascript" src="js/spjk.js"></script>
+	 <script>
+		$(".video-windows").on('dblclick',".playerbox",function(){
+			console.log("全屏")
+			if($(this).attr("opening") == undefined || $(this).attr("opening")==0){
+				$(this).attr("opening",1);
+				$(this).css("position",'fixed')
+				$(this).css("width","100%")
+				$(this).css("height","100%")
+				$(this).css("left","0")
+				$(this).css("top","0")
+				$(this).css("z-index","99999")
+			}else{
+				$(this).attr("opening",0);
+				$(this).css("position",'relative')
+				$(this).css("width","885px")
+				$(this).css("height","498px")
+				$(this).css("left","0")
+				$(this).css("top","0")
+				$(this).css("z-index","1")
+			}
+			
+		})
+		//ESC 关闭弹窗
+		$(window).keyup(function (e) {
+			if (e.keyCode == 27) {			
+				if($(".playerbox").attr("opening") == 1){
+					$(".playerbox").attr("opening",0);
+					$(".playerbox").css("position",'relative')
+					$(".playerbox").css("width","885px")
+					$(".playerbox").css("height","498px")
+					$(".playerbox").css("left","0")
+					$(".playerbox").css("top","0")
+					$(".playerbox").css("z-index","1")
+				}
+			}
+		});
+		$('.select').on('click', '.placeholder', function(e) {
+			var parent = $(this).closest('.select');
+			if (!parent.hasClass('is-open')) {
+				parent.addClass('is-open');
+				$('.select.is-open').not(parent).removeClass('is-open');
+			} else {
+				parent.removeClass('is-open');
+			}
+			e.stopPropagation();
+		}).on('click', 'ul>li', function() {
+			var parent = $(this).closest('.select');
+			parent.removeClass('is-open').find('.placeholder').text($(this).text());
+			if($(this).parent().attr("id")=="areaList"){
+			//切换牧区
+				var node = $(this).attr("node-id");
+				getBuild(node)
+			}else if($(this).parent().attr("id")=="deviceList"){
+				var pl = players.length;
+				for(var i=0;i<pl;++i){
+					if(players[i]!=null){
+						///console.log(player)
+						players[i].stop();
+						players[i].destroy();
+						players.splice(i, 1);
+					}	
+				}
+				console.log(players)
+				var node = $(this).attr("node-id");
+				$(".video-wrapper-head").text($(this).text());
+				getDevice(node)
+				
+			}
+				
+		});
+		
+		
+		$('body').on('click', function() {
+			$('.select.is-open').removeClass('is-open');
+		});
+	 </script>
+</body>
+</html>

swfk.html

@@ -0,0 +1,809 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <title>生物防控</title>
+  <link href="css/common.css" rel="stylesheet">
+  <link href="css/jkfx.css" rel="stylesheet">
+  <link href="css/scrollBar.css" rel="stylesheet">
+
+  <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
+  <script type="text/javascript" src="js/echarts.min.js"></script>
+  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
+  <script type="text/javascript" src="js/common.js"></script>
+  <script type="text/javascript" src="js/api.js"></script>
+  <script type="text/javascript" src="js/jsmpeg.min.js"></script>
+</head>
+<body>
+	<div class="header-wrapper">
+	  <div class="title">
+	  智能化综合管理平台
+	  <svg version="1.1" width="900" height='100'>
+	   <polygon points="0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0" style="fill:transparent;stroke:#69F8FE;stroke-width:2"/>
+		</svg>
+	  </div>
+	  <div class="nav-bar">
+		<a class="item " href="index.html">首页</a>
+		<a class="item " href="fzfx.html">生产管理</a>
+		<a class="item active" href="swfk.html">生物防控</a>
+		<a class="item " href="spjk.html">视频监控</a>
+		<a class="item" href="hbjc.html">环保监测</a>
+	  </div>
+	</div>
+	<div class="grid-wrapper">
+	  <div class="left1">
+		<div class="wrapper">
+		<div class='chart-tab-t'><div class="chart-tab-title">人员出入详情</div></div>
+		<div class="wrapper-content">
+			  <div class="wide-border">
+				
+			  </div>
+			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   
+			   </g>
+			   
+				</svg>
+				<svg version="1.1" width="90" height="25" class="wide-border-line2">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   </g>
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line3">
+			 
+			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line4">
+			 
+			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<div id="chart-stztzfb"></div>
+			  </div>
+		
+		</div>
+	  </div>
+	  <div class="left2">
+		<div class="wrapper">
+		<div class='chart-tab-t'><div class="chart-tab-title">每日流动分布</div></div>
+		<div class="wrapper-content">
+			  <div class="wide-border">
+				
+			  </div>
+			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   
+			   </g>
+			   
+				</svg>
+				<svg version="1.1" width="90" height="25" class="wide-border-line2">
+			  <g transform="translate(0.5 0.5)">
+			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
+			   </g>
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line3">
+			 
+			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<svg version="1.1" width="25" height="26" class="wide-border-line4">
+			 
+			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
+			   
+				</svg>
+				<div id="chart-styyfx"></div>
+			  </div>
+		
+			</div>
+	  </div>
+	  <div class="center">
+
+		<div class="line1">
+		  <div class="cont datenow">2020-05-21</div>
+		  <div class="division"></div>	  
+		  <div class="cont">生物防控</div>
+		  <div class="division"></div>
+		   <div class="cont wether"></div>
+		</div>
+		<div class="line3">
+			<div class="msg-tab-body" id="msg-list-content">
+					<div class="msg-list-content" >
+					
+					</div>
+					
+					
+				</div>
+				<div class="msg-detail">
+					<div class="jk-img"><img src="images/default.png" id="usrImg"/></div>
+					<div class="jk-info-list">
+					
+						<div class='jk-info-item'>姓名：<span id="username"></span></div>
+						<div class='jk-info-item'>终端名称：<span id="showagent"></span></div>
+						<div class='jk-info-item'>出入方式：<span id="showtype"></span></div>
+						<div class='jk-info-item'>出入时间：<span id="showtime"></span></div>
+					</div>
+				</div>
+		</div>
+		
+	  </div>
+	  <div class="right">
+			<div class="wrapper">
+				<div class="tab-t" style="padding-left:50px;">
+					<div class="right-tabs">
+						<div class="log-tab active">视频监控</div>
+						<div class="log-tab">烤箱数据</div>
+					</div>
+				</div>
+				<div class="switch-tab-list" style="display:block">
+					<div id="play-box-0" class="play-box-content"></div>
+					<div id="play-box-1" class="play-box-content"></div>
+				</div>
+				<div class="switch-tab-list">
+					
+				</div>
+				<!--<div class="tab-title">烤箱数据</div>-->
+				
+			</div>
+	  </div>
+	  <div class="bottom1">
+		<div class="wrapper">
+		<div class="tab-t"><div class="tab-title">访问统计</div></div>
+		<div class="chartBlock">
+			<div id='chartBottom1'>
+				<div class="chartTab-t"><div class="chartTab-title">每日访问统计</div></div>
+				<div id="chart-snwd"></div>
+			</div>
+			<div id='chartBottom2'>
+				<div class="chartTab-t"><div class="chartTab-title">每周访问统计</div></div>
+				<div id="chart-snsd"></div>
+			</div>
+			<div id='chartBottom3'>
+				<div class="chartTab-t"><div class="chartTab-title">每月访问统计</div></div>
+				<div id="chart-myfwtj"></div>
+			</div>
+		</div>
+		</div>
+	  </div>
+	</div>
+<script>
+//切换右侧
+$(".right-tabs .log-tab").on('click',function(){
+	var i = $(this).index(".right-tabs .log-tab");
+	$(".right-tabs .log-tab").removeClass("active");
+	$(this).addClass("active");	
+	$(".switch-tab-list").hide();
+	$(".switch-tab-list").eq(i).show();
+})
+
+	var dom_stztzfb = document.getElementById("chart-stztzfb");
+	var dom_styyfx = document.getElementById("chart-styyfx");
+	var dom_snwd = document.getElementById("chart-snwd");
+	var dom_snsd = document.getElementById("chart-snsd");
+	var dom_myfwtj = document.getElementById("chart-myfwtj");
+	var myChart_stztzfb = echarts.init(dom_stztzfb);
+	var myChart_styyfx = echarts.init(dom_styyfx);
+	var myChart_snwd = echarts.init(dom_snwd);
+	var myChart_snsd = echarts.init(dom_snsd);
+	var myChart_myfwtj = echarts.init(dom_myfwtj);
+	var app = {};
+	option_stztzfb=null,option_styyfx=null,option_snwd=null,option_snsd=null,option_myfwtj=null;
+	//人员出入分布柱状图
+	var moment = new Date();
+	var nowHour = moment.getHours();
+	var nowDate = getDate();
+
+	var rycrUrl = "/analyse/uface/passCount";
+	var data_rycr_in=[];
+	var data_rycr_out=[];
+	var data_rycr_legend = [];
+	
+	var data_mrfw_legend = []
+	var times=0;
+	for(var i=0;i<=nowHour;++i){
+		(function (i) {
+			var j = i+1;
+			var rycrParam = {
+				beginTime:nowDate+" "+(i<10?"0"+i:i)+":00:00",
+				endTime:nowDate+" "+(j<10?"0"+j:j)+":00:00",
+			};
+			data_rycr_legend[i] = (i<10?"0"+i:i)+":00"+"-"+(j<10?"0"+j:j)+":00"; 
+			data_mrfw_legend[i] = (i<10?"0"+i:i)+":00"
+			getData(rycrUrl,rycrParam).then(res => {
+				data_rycr_in[i] = res.inCount;
+				data_rycr_out[i] = res.outCount;
+				
+				if(times==nowHour){
+				//两个图，一个柱状图，一个每日访问折线图
+					option_stztzfb.series[0].data = data_rycr_out;
+					
+					option_stztzfb.series[1].data = data_rycr_in;
+					option_stztzfb.xAxis.data = data_rycr_legend;
+					 myChart_stztzfb.setOption(option_stztzfb, true);
+					 
+					 option_snwd.series.data = data_rycr_in;
+					 option_snwd.xAxis.data = data_mrfw_legend;
+					 myChart_snwd.setOption(option_snwd, true);
+				}
+				times++;
+			})
+		}(i))
+		
+	}
+	
+	option_stztzfb =  {
+	color:['#207bc4','#b93b6a'],
+    tooltip : {
+        trigger: 'axis',
+        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+        },
+		
+		
+    },
+    grid: {
+        x: '3%',
+        y: '13%',
+        x2: '5%',
+		y2: '5%',
+        containLabel: true
+		
+    },
+	legend: {
+        data: ['外出人数', '进入人数'],
+		icon:'circle',
+		itemGap: 5,
+		itemWidth:10,
+		top: '2%',
+		x:'center',
+		textStyle:{
+					
+		color:'#ccf5f9',
+		},
+    },
+    xAxis :{
+            type : 'category',
+            data : data_rycr_legend,
+            axisTick: {
+                alignWithLabel: true
+            },
+			axisLine: {
+					show: true,
+					lineStyle: {
+								type: 'solid',
+								color: '#4865e3',//左边线的颜色
+								width:'1'//坐标线的宽度
+					}
+			},
+			axisLabel: {
+				textStyle: {
+                color: '#ccf5f9',
+				
+				},
+				
+			}
+			
+        },
+    yAxis :{
+            type : 'value',
+			scale: true,
+			axisLine: {
+					show: true,
+					lineStyle: {
+								type: 'solid',
+								color: '#4865e3',//左边线的颜色
+								width:'1'//坐标线的宽度
+					}
+			},
+			splitLine:{
+				lineStyle: {
+						type: 'solid',
+						color: 'rgba(72,101,227,0.7)',
+						width:'1'
+				}
+			},
+			axisLabel: {
+				textStyle: {
+                color: '#ccf5f9',
+				
+				},
+				
+			}
+        },
+	dataZoom: [{
+				type: 'inside',
+				start: 80,
+				end: 100
+			}],
+    series : [
+        {
+            name:"外出人数",
+            type:'bar',
+            barWidth: '30%',
+            data:data_rycr_out,
+			itemStyle: {
+		        normal: {
+		        
+				label: {
+						show: true, //开启显示
+						position: 'top', //在上方显示
+						textStyle: { //数值样式
+								color: '#ccf5f9',
+								fontSize: 12
+							},
+						formatter: '{c}'
+						},
+						
+		         }
+		    },
+        },
+		{
+            name:"进入人数",
+            type:'bar',
+            barWidth: '30%',
+            data:data_rycr_in,
+			itemStyle: {
+		        normal: {		
+				label: {
+						show: true, //开启显示
+						position: 'top', //在上方显示
+						textStyle: { //数值样式
+								color: '#ccf5f9',
+								fontSize: 12
+							},
+						formatter: '{c}'
+						}
+		         }
+		    },
+        }
+    ]
+};
+
+///每日流动数据获取
+	var data_styyfx_in=0;
+	var data_styyfx_out=0;
+	var styyfxParam = {
+		beginTime:nowDate+" "+"00:00:00",
+		endTime:nowDate+" "+(nowHour<10?"0"+nowHour:nowHour)+":00:00",
+	};
+	getData(rycrUrl,styyfxParam).then(res => {
+		data_styyfx_in = res.inCount;
+		data_styyfx_out = res.outCount;
+		option_styyfx.series.data[0] = data_styyfx_in;
+		option_styyfx.series.data[1] = data_styyfx_out;
+		myChart_styyfx.setOption(option_styyfx, true);
+
+	})
+
+	//每日流动分布饼状图
+	option_styyfx = {
+    tooltip: {
+        trigger: 'item',
+        formatter: "{b}: {c} ({d}%)"
+    },
+	legend: {
+        orient: 'vertical',
+        y: 'center',    //延Y轴居中
+        //x: 'right', //居右显示
+		right:30,
+        data: ['进入','外出'],
+		textStyle:{
+			color:'#fff',
+			
+		}
+    },
+    series: {
+            name:'每日流动分布',
+            type:'pie',
+			
+            center: ['35%', '55%'],
+			label: {
+                show: true,
+                position: 'inside',
+                formatter: '{d}%',	
+				textStyle:{
+					color:'#fff',
+					fontSize:14
+				},
+				
+            },
+            data:[
+                {value:data_styyfx_in, name:'进入'},
+                {value:data_styyfx_out, name:'外出'},
+            ]
+        }
+    
+};
+//每日访问统计折线图
+option_snwd = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    grid:{
+            x:40,
+            y:45,
+            x2:40,
+            y2:30,
+                  
+    },
+    
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['08:00','09:00','10:00','11:00','12:00','13:00','14:00'],
+		axisLabel:{
+			color:"#fff",
+		},
+		axisLine: {
+            show: true,
+			lineStyle: {
+                        type: 'solid',
+                        color: '#fff',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+        },
+		
+    },
+    yAxis: {
+        type: 'value',
+		name: '次数',
+		axisLabel:{
+			color:"#fff",
+		},
+		axisLine: {
+            show: true,
+			lineStyle: {
+                        type: 'solid',
+                        color: '#fff',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+        },
+		splitLine:{
+			lineStyle: {
+                        type: 'solid',
+                        color: '#1c3860',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+		},
+		
+    },
+    series: {
+            name:'每日访问统计',
+            type:'line',
+            data:[],
+			 
+        }
+    
+};
+//每周访问统计折线图
+option_snsd = {
+    tooltip: {
+        trigger: 'axis'
+    },
+	
+    grid:{
+            x:40,
+            y:45,
+            x2:40,
+            y2:30,
+                  
+    },
+   
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['06.03','06.04','06.05','06.06','06.07','06.08','06.09'],
+		axisLabel:{
+			color:"#fff",
+		},
+		
+		axisLine: {
+            show: true,
+			lineStyle: {
+                        type: 'solid',
+                        color: '#fff',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+        },
+		
+    },
+    yAxis: {
+        type: 'value',
+		name: '次数',
+		axisLabel:{
+			color:"#fff",
+		},
+		axisLine: {
+            show: true,
+			lineStyle: {
+                        type: 'solid',
+                        color: '#fff',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+        },
+		splitLine:{
+			lineStyle: {
+                        type: 'solid',
+                        color: '#1c3860',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+		},
+		
+    },
+    series: [
+        {
+            name:'每周访问统计',
+            type:'line',
+			itemStyle : {
+				normal : {
+					lineStyle:{
+						color:'#ff444c'
+						}
+				}
+			},
+            data:[90, 74, 78, 81, 85, 86, 89],
+        }
+    ]
+};
+//每月访问统计折线图
+option_myfwtj = {
+    tooltip: {
+        trigger: 'axis'
+    },
+	
+    grid:{
+            x:40,
+            y:45,
+            x2:40,
+            y2:30,
+                  
+    },
+   
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['1月','2月','3月','4月','5月','6月','7月'],
+		axisLabel:{
+			color:"#fff",
+		},
+		
+		axisLine: {
+            show: true,
+			lineStyle: {
+                        type: 'solid',
+                        color: '#fff',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+        },
+		
+    },
+    yAxis: {
+        type: 'value',
+		name: '次数',
+		min: function(value) {
+			return value.min - 200;
+		},
+		max: function(value) {
+			return value.max + 100;
+		},
+		axisLabel:{
+			color:"#fff",
+		},
+		axisLine: {
+            show: true,
+			lineStyle: {
+                        type: 'solid',
+                        color: '#fff',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+        },
+		splitLine:{
+			lineStyle: {
+                        type: 'solid',
+                        color: '#1c3860',//左边线的颜色
+                        width:'1'//坐标线的宽度
+                }
+		},
+		
+    },
+    series: [
+        {
+            name:'每月访问统计',
+            type:'line',
+			itemStyle : {
+				normal : {
+					lineStyle:{
+						color:'#ff444c'
+						}
+				}
+			},
+            data:[290, 274, 278, 281, 285, 286, 289],
+        }
+    ]
+};
+
+	if (option_stztzfb && typeof option_stztzfb === "object") {
+		myChart_stztzfb.setOption(option_stztzfb, true);
+	}
+	if (option_styyfx && typeof option_styyfx === "object") {
+		myChart_styyfx.setOption(option_styyfx, true);
+	}
+	if (option_snwd && typeof option_snwd === "object") {
+		myChart_snwd.setOption(option_snwd, true);
+	}
+	if (option_snsd && typeof option_snsd === "object") {
+		myChart_snsd.setOption(option_snsd, true);
+	}
+	if (option_myfwtj && typeof option_myfwtj === "object") {
+		myChart_myfwtj.setOption(option_myfwtj, true);
+	}
+	
+	//人员出入列表
+	$(".msg-list-content").delegate(".msg-tab-list","click",function(event){
+			console.log(event.target)
+			var target = $(event.target);
+			if(target.attr("class") != "msg-tab-list"){
+				target = target.parents(".msg-tab-list")
+			}
+			$(".msg-tab-list").removeClass("active");
+			target.addClass("active");
+			$("#username").text(target.find(".username").text())
+			$("#showagent").text(target.find(".agent").text())
+			$("#showtime").text(target.find(".finish-time").text())
+			$("#showtype").text(target.find(".gotype").text())
+			$("#usrImg").attr("src",target.find(".man-dothis img").attr("src"))
+	})
+	var pageNum = 1;
+	var pageSize = 10;
+	
+	function getMsgList(){
+		
+		(function (j) {
+		console.log(j)
+		var msgParam = {
+			pageNum:j,
+			pageSize:pageSize
+		};
+		var msgUrl = "/analyse/uface/todayRecord";
+		getData(msgUrl,msgParam).then(res => {
+			console.log(res)
+			var data = res.content==undefined?[]:res.content;
+			var len = data.length;
+			var html = "";
+			for(var i=0;i<len;++i){
+				html+='<div class="msg-tab-list">';
+				html+='<div class="man-dothis"><img src="http://dgs.ifarmcloud.com/dgs-picture/'+data[i].member.imgUrl+'" /></div>';
+				html+='<div class="this-content"><span class="finish-time">'+data[i].record.time+'</span><span class="username">'+data[i].member.name+'</span>';
+				html+='从<span class="agent">'+data[i].device.description+'</span><span class="gotype">'+(data[i].device.meta.direction=='in'?'进入':'外出')+'</span></div></div>';			
+			}
+			if(len>0){
+				pageNum = j+1;
+			}
+			$(".msg-list-content").append(html);
+			
+		})
+		}(pageNum))
+	}
+	getMsgList()
+	var docuT = document.getElementById("msg-list-content")
+	docuT.onscroll = function() {
+			var clientH = docuT.clientHeight;
+            var scrollT = docuT.scrollTop;
+            var wholeH = docuT.scrollHeight;
+            if (clientH + scrollT >= wholeH) {
+				console.log("下一页")
+                getMsgList();
+            }
+	}
+	
+	//固定视频
+	if(player1!=null){
+	///console.log(player)
+		player1.stop();
+		player1.destroy();
+		player1=null;
+	}
+	if(player2!=null){
+		///console.log(player)
+		player2.stop();
+		player2.destroy();
+		player2=null;
+	}
+	var player1=null;
+	var player2=null;
+	var videoArr = [
+	["rtsp://admin:admin123@192.168.1.17:554/cam/realmonitor?channel=1&subtype=0","rtsp://admin:admin123@192.168.1.17:554/cam/realmonitor?channel=1&subtype=1"],
+	["rtsp://admin:admin123@192.168.1.181:554/cam/realmonitor?channel=1&subtype=0","rtsp://admin:admin123@192.168.1.181:554/cam/realmonitor?channel=1&subtype=1"]]
+	
+	$(function(){
+		console.log(sessionStorage.getItem("currIp"),sessionStorage.getItem("loginIp"))
+		currIp = currIp?currIp:sessionStorage.getItem("currIp")
+		loginIp = loginIp?loginIp:sessionStorage.getItem("loginIp")
+		lanIp = lanIp?lanIp:sessionStorage.getItem("lanIp")
+		console.log(currIp,loginIp)
+			if(currIp==loginIp){
+			//登录IP和设备IP一致
+				videoIp = lanIp
+				for(var i=0;i<videoArr.length;++i){
+					if(i==0){
+						setTimeout(function() {
+						player1 = play(0,videoArr[0][0],"1366x768")
+						},1000)
+					}else{
+						setTimeout(function() {
+						player2 = play(1,videoArr[1][0],"1366x768")
+						},2000)
+						
+					}
+				}
+			
+			
+			
+			
+			}else{
+					//用普清
+			videoIp = currIp;
+				for(var i=0;i<videoArr.length;++i){
+					if(i==0){
+						setTimeout(function() {
+						player1 = play(0,videoArr[0][1],"640x480")
+						},1000)
+					}else{
+						setTimeout(function() {
+						player2 = play(1,videoArr[1][1],"640x480")
+						},2000)
+						
+					}
+				}		
+			}
+		
+
+		
+					
+	})
+</script>
+<script src="js/scrollBar.js" type="text/javascript"></script>
+<script>
+	/*$('.msg-list-content').scrollBar({
+    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
+    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
+    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
+})*/
+$('.tab-videoes').scrollBar({
+    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
+    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
+    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
+})
+$('#tab-area1 .pc-nums').scrollBar({
+    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
+    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
+    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
+})
+$('#tab-area2 .select-list').scrollBar({
+    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
+    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
+    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
+})
+</script>	
+<script src="js/jkfx.js" type="text/javascript"></script>
+<script type="text/javascript" src="js/bootstrap.min.js"></script>
+<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
+<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
+<script type="text/javascript">
+    $('.datetimePicker').datetimepicker({
+        language:  'zh-CN',
+        weekStart: 1,
+        todayBtn:  1,
+		autoclose: 1,
+		todayHighlight: 1,
+		startView: 2,
+		forceParse: 0,
+        showMeridian: 1,
+		format: 'yyyy-mm-dd hh:ii',
+		pickerPosition: "bottom-left"
+    });
+</script>
+</body>
+</html>