提交代码

css/flipclock.css

@@ -0,0 +1,418 @@
+/* Get the bourbon mixin from http://bourbon.io */
+/* Reset */
+.flip-clock-wrapper * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -o-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.flip-clock-wrapper a {
+  cursor: pointer;
+  text-decoration: none;
+  color: #ccc; }
+
+.flip-clock-wrapper a:hover {
+  color: #fff; }
+
+.flip-clock-wrapper ul {
+  list-style: none; }
+
+.flip-clock-wrapper.clearfix:before,
+.flip-clock-wrapper.clearfix:after {
+  content: " ";
+  display: table; }
+
+.flip-clock-wrapper.clearfix:after {
+  clear: both; }
+
+.flip-clock-wrapper.clearfix {
+  *zoom: 1; }
+
+/* Main */
+.flip-clock-wrapper {
+  font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
+  -webkit-user-select: none; }
+
+.flip-clock-meridium {
+  background: none !important;
+  box-shadow: 0 0 0 !important;
+  font-size: 36px !important; }
+
+.flip-clock-meridium a { color: #313333; }
+
+.flip-clock-wrapper {
+  text-align: center;
+  position: relative;
+  margin: 1em -3em 0 0;
+}
+
+.flip-clock-wrapper:before,
+.flip-clock-wrapper:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+.flip-clock-wrapper:after {
+    clear: both;
+}
+
+/* Skeleton */
+.flip-clock-wrapper ul {
+  position: relative;
+  float: left;
+  margin: 5px;
+  width: 50px;
+  height: 70px;
+  font-size: 60px;
+  font-weight: bold;
+  line-height: 67px;
+  border-radius: 6px;
+  background: #000;
+}
+
+.flip-clock-wrapper ul li {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  line-height: 67px;
+  text-decoration: none !important;
+}
+
+.flip-clock-wrapper ul li:first-child {
+  z-index: 2; }
+
+.flip-clock-wrapper ul li a {
+  display: block;
+  height: 100%;
+  -webkit-perspective: 200px;
+  -moz-perspective: 200px;
+  perspective: 200px;
+  margin: 0 !important;
+  overflow: visible !important;
+  cursor: default !important; }
+
+.flip-clock-wrapper ul li a div {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 50%;
+  font-size: 60px;
+  overflow: hidden; 
+  outline: 1px solid transparent; }
+
+.flip-clock-wrapper ul li a div .shadow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2; }
+
+.flip-clock-wrapper ul li a div.up {
+  -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -o-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+  top: 0; }
+
+.flip-clock-wrapper ul li a div.up:after {
+  content: "";
+  position: absolute;
+  top: 44px;
+  left: 0;
+  z-index: 5;
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.4); }
+
+.flip-clock-wrapper ul li a div.down {
+  -webkit-transform-origin: 50% 0;
+  -moz-transform-origin: 50% 0;
+  -ms-transform-origin: 50% 0;
+  -o-transform-origin: 50% 0;
+  transform-origin: 50% 0;
+  bottom: 0;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.flip-clock-wrapper ul li a div div.inn {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 200%;
+  color: #fff;
+  text-shadow: 0 1px 2px #000;
+  text-align: center;
+  background-color: #0e3153;
+  border-radius: 6px;
+  font-size: 60px; }
+
+.flip-clock-wrapper ul li a div.up div.inn {
+  top: 0; }
+
+.flip-clock-wrapper ul li a div.down div.inn {
+  bottom: 0; }
+
+/* PLAY */
+.flip-clock-wrapper ul.play li.flip-clock-before {
+  z-index: 3; }
+
+.flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
+
+.flip-clock-wrapper ul.play li.flip-clock-active {
+  -webkit-animation: asd 0.01s 0.49s linear both;
+  -moz-animation: asd 0.01s 0.49s linear both;
+  animation: asd 0.01s 0.49s linear both;
+  z-index: 5; }
+
+.flip-clock-divider {
+  float: left;
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 80px; }
+
+.flip-clock-divider:first-child {
+  width: 0; }
+
+.flip-clock-dot {
+  display: block;
+  background: #FFF;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  left: 5px; }
+
+.flip-clock-divider .flip-clock-label {
+  position: absolute;
+  top: -1.5em;
+  right: -86px;
+  color: black;
+  text-shadow: none; }
+
+.flip-clock-divider.minutes .flip-clock-label {
+  right: -88px; }
+
+.flip-clock-divider.seconds .flip-clock-label {
+  right: -91px; }
+
+.flip-clock-dot.top {
+  top: 25px; }
+
+.flip-clock-dot.bottom {
+  bottom: 25px; }
+
+@-webkit-keyframes asd {
+  0% {
+    z-index: 2; }
+
+  100% {
+    z-index: 4; } }
+
+@-moz-keyframes asd {
+  0% {
+    z-index: 2; }
+
+  100% {
+    z-index: 4; } }
+
+@-o-keyframes asd {
+  0% {
+    z-index: 2; }
+
+  100% {
+    z-index: 4; } }
+
+@keyframes asd {
+  0% {
+    z-index: 2; }
+
+  100% {
+    z-index: 4; } }
+
+.flip-clock-wrapper ul.play li.flip-clock-active .down {
+  z-index: 2;
+  -webkit-animation: turn 0.5s 0.5s linear both;
+  -moz-animation: turn 0.5s 0.5s linear both;
+  animation: turn 0.5s 0.5s linear both; }
+
+@-webkit-keyframes turn {
+  0% {
+    -webkit-transform: rotateX(90deg); }
+
+  100% {
+    -webkit-transform: rotateX(0deg); } }
+
+@-moz-keyframes turn {
+  0% {
+    -moz-transform: rotateX(90deg); }
+
+  100% {
+    -moz-transform: rotateX(0deg); } }
+
+@-o-keyframes turn {
+  0% {
+    -o-transform: rotateX(90deg); }
+
+  100% {
+    -o-transform: rotateX(0deg); } }
+
+@keyframes turn {
+  0% {
+    transform: rotateX(90deg); }
+
+  100% {
+    transform: rotateX(0deg); } }
+
+.flip-clock-wrapper ul.play li.flip-clock-before .up {
+  z-index: 2;
+  -webkit-animation: turn2 0.5s linear both;
+  -moz-animation: turn2 0.5s linear both;
+  animation: turn2 0.5s linear both; }
+
+@-webkit-keyframes turn2 {
+  0% {
+    -webkit-transform: rotateX(0deg); }
+
+  100% {
+    -webkit-transform: rotateX(-90deg); } }
+
+@-moz-keyframes turn2 {
+  0% {
+    -moz-transform: rotateX(0deg); }
+
+  100% {
+    -moz-transform: rotateX(-90deg); } }
+
+@-o-keyframes turn2 {
+  0% {
+    -o-transform: rotateX(0deg); }
+
+  100% {
+    -o-transform: rotateX(-90deg); } }
+
+@keyframes turn2 {
+  0% {
+    transform: rotateX(0deg); }
+
+  100% {
+    transform: rotateX(-90deg); } }
+
+.flip-clock-wrapper ul li.flip-clock-active {
+  z-index: 3; }
+
+/* SHADOW */
+.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
+  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  -webkit-animation: show 0.5s linear both;
+  -moz-animation: show 0.5s linear both;
+  animation: show 0.5s linear both; }
+
+.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
+  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  -webkit-animation: hide 0.5s 0.3s linear both;
+  -moz-animation: hide 0.5s 0.3s linear both;
+  animation: hide 0.5s 0.3s linear both; }
+
+/*DOWN*/
+.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
+  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
+  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  -webkit-animation: show 0.5s linear both;
+  -moz-animation: show 0.5s linear both;
+  animation: show 0.5s linear both; }
+
+.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
+  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
+  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  -webkit-animation: hide 0.5s 0.3s linear both;
+  -moz-animation: hide 0.5s 0.3s linear both;
+  animation: hide 0.5s 0.2s linear both; }
+
+@-webkit-keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-o-keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@-moz-keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@-o-keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }

css/index.css

@@ -0,0 +1,638 @@
+body{
+    line-height: 1.15;
+    font-size: 0.5rem;
+    margin: 0;
+    padding: 0;
+    background-repeat: no-repeat;
+    background-position: 0 0 / cover;
+    background: url(../images/bg.jpg);
+	background-size: 100% 100%;
+}
+*{
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+}
+ul{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+.clearfix{
+  clear: both;
+}
+.header {
+  min-width: 1024px;
+  max-width: 1920px;
+  height: 3.167rem;
+  background: url(../images/logo.png) no-repeat center;
+  margin: 0 auto;
+  padding: 0 0.833rem 0;
+  position: relative;
+  z-index: 11;
+  text-align: center;
+}
+.header .title{
+  z-index: 11;
+  opacity: 1;
+  color: #61a8ff;
+  font-size: 2rem;
+}
+.viewport {
+    /* 限定大小 */
+    min-width: 1024px;
+    max-width: 1920px;
+    min-height: 780px;
+    margin: 0 auto;    
+    display: flex;    
+    display: flex;
+    padding: 0 0.833rem 0;
+    z-index: 11;
+}
+.column{
+    flex: 3;
+    position: relative;
+    z-index: 11;
+}
+.column:nth-child(2){
+    flex: 4;
+    margin: 1.333rem 0.833rem 0;
+}
+.panel {
+    /* 边框 */
+    box-sizing: border-box;
+    border: 2px solid red;
+    border-image: url(../images/border.png) 51 38 21 132;
+    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
+    position: relative;
+    margin-bottom: 0.833rem;
+}
+.panel .inner {
+    /* 装内容 */
+    /* height: 60px; */
+    position: absolute;
+    top: -2.125rem;
+    right: -1.583rem;
+    bottom: -0.875rem;
+    left: -5.5rem;
+    padding: 1rem 1.5rem;
+}
+.panel h3{
+    font-size: 0.833rem;
+    color: #fff;
+}
+/* 概览区域 */
+.overview{
+    height: 4.583rem;
+  }
+  .overview .inner{
+    display: flex;
+    justify-content: space-between;
+  }
+  .overview h4{
+    font-size: 1.167rem;
+    padding-left: 0.2rem;
+    color: #fff;
+    margin-bottom: 0.333rem
+  }
+  .overview span{
+    font-size: 0.667rem;
+    color: #4c9bfd;
+}
+/* 监控 */
+.monitor{
+	height: 20rem;
+  }
+  .monitor .inner{
+	padding: 1rem 0;
+	display: flex;
+	flex-direction: column;
+  }
+  .monitor .tabs{
+	padding: 0 1.5rem;
+	margin-bottom: 0.75rem;
+  }
+  .monitor .tabs a{
+	color: #1950c4;
+	font-size: 0.75rem;
+	padding: 0 1.125rem;
+  }
+  
+  .monitor .tabs a:first-child{
+	border-right: 0.083rem solid #00f2f1;
+	padding-left: 0;
+  }
+  
+  .monitor .tabs a.active{
+	color: #fff;
+  }
+  .monitor .content{
+	flex: 1;
+	display: none;
+	position: relative;
+  }
+  .monitor .head{
+	background: rgba(255, 255, 255, 0.1);
+	font-size: 0.583rem;
+	padding: 0.5rem 1.5rem;
+	color: #68d8fe;
+	display: flex;
+	justify-content: space-between;
+	line-height: 1.05;
+  }
+  .monitor .col {
+    display: block;
+  }
+  .monitor .col:nth-child(1) {
+	width: 3.5rem;
+  }
+  .monitor .col:nth-child(2) {
+	width: 3.2rem;
+  text-align: center;
+	/* 不换行  一行省略*/
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+  }
+  .monitor .col:nth-child(3) {
+	width: 3.2rem;
+  text-align: center;
+  }
+  .monitor .col:nth-child(4) {
+    width: 3.2rem;
+    text-align: left;
+    }
+  .alarms-list .col:nth-child(4){
+    color:#f37b1d
+  }
+  .alarms-list .icon-dot{
+    color:#f37b1d
+  }
+  .monitor .marquee-view{
+  position: absolute;
+  top: 1.6rem;
+  bottom: 0; 
+  width: 100%; 
+  overflow: hidden;
+}
+
+.monitor .row{
+  line-height: 1.05;
+  padding: 0.5rem 1.5rem;
+  color: #61a8ff;
+  font-size: 0.5rem;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+.monitor .row:hover{
+  color:#68d8ff;
+  background: rgba(255, 255, 255, 0.1);
+}
+.monitor .row:hover .icon-dot{
+  opacity: 0;
+}
+
+.monitor .icon-dot{
+  position: absolute;
+  left: 0.64rem;
+  opacity: 1;
+}
+.monitor .marquee-view{
+	position: absolute;
+	top: 1.6rem;
+	bottom: 0;
+  height: 341px;
+	width: 100%; 
+	overflow: hidden;
+  }
+  
+  .monitor .row{
+	line-height: 1.05;
+	padding: 0.5rem 1.5rem;
+	color: #61a8ff;
+	font-size: 0.5rem;
+	position: relative; 
+	display: flex;
+	justify-content: space-between;
+  }
+  .monitor .row:hover{
+	color:#68d8ff;
+	background: rgba(255, 255, 255, 0.1);
+  }
+  .monitor .row:hover .icon-dot{
+	opacity: 0;
+  }
+  
+  .monitor .icon-dot{
+	position: absolute;
+	left: 0.64rem;
+	opacity: 1;
+}
+/* ------------------------------------------------------------动画 */
+@keyframes row{
+  0%{}
+  100%{
+    transform: translateY(-50%);
+  }
+}
+/* 调用动画 */
+.monitor .marquee {
+  /* //infinite永久调用动画 */
+  animation: row  10s linear infinite;
+}
+/*鼠标划入 停止动画  */
+.monitor .marquee:hover {
+  animation-play-state: paused;
+}
+/* 点位 */
+.point {
+  height: 14.167rem;
+}
+.point .chart {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: space-between;
+}
+.point .pie {
+  width: 13rem;
+  height: 10rem;
+  margin-left: -0.4rem;
+}
+.point .data {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 7rem;
+  padding: 1.5rem 1.25rem;
+  box-sizing: border-box;
+  background-image: url(../images/rect.png);
+  background-size: cover;
+}
+.point h4 {
+  margin-bottom: 0.5rem;
+  font-size: 1.167rem;
+  color: #fff;
+}
+.point span {
+  display: block;
+  color: #4c9bfd;
+  font-size: 0.667rem;
+}
+/* 地图  */
+.map {
+  height: 24.1rem;
+  margin-bottom: 0.833rem;
+  display: flex;
+  flex-direction: column;
+}
+.map h3 {
+  line-height: 1;
+  padding: 0.667rem 0;
+  margin: 0;
+  font-size: 0.833rem;
+  color: #fff;
+}
+.map .icon-cube {
+  color: #68d8fe;
+}
+.map .chart {
+  flex: 1;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.map .geo {
+  width: 100%;
+  height: 540px;
+}
+/* 用户模块 */
+.users {
+  height: 14.167rem;
+  display: flex;
+}
+.users .chart {
+  display: flex;
+  margin-top: 1rem;
+}
+.users .bar {
+  width: 24.5rem;
+  height: 10rem;
+}
+.users .data {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 7rem;
+  padding: 1.5rem 1.25rem;
+  box-sizing: border-box;
+  background-image: url(../images/rect.png);
+  background-size: cover;
+}
+.users h4 {
+  margin-bottom: 0.5rem;
+  font-size: 1.167rem;
+  color: #fff;
+}
+.users span {
+  display: block;
+  color: #4c9bfd;
+  font-size: 0.667rem;
+}
+/* 订单 */
+.order {
+  height: 6.167rem;
+}
+.order .filter {
+  display: flex;
+}
+.order .filter a {
+  display: block;
+  height: 0.75rem;
+  line-height: 1;
+  padding: 0 0.75rem;
+  color: #1950c4;
+  font-size: 0.75rem;
+  border-right: 0.083rem solid #00f2f1;
+}
+.order .filter a:first-child {
+  padding-left: 0;
+}
+.order .filter a:last-child {
+  border-right: none;
+}
+.order .filter a.active {
+  color: #fff;
+  font-size: 0.833rem;
+}
+.order .data {
+  display: flex;
+  margin-top: 0.833rem;
+}
+.order .item {
+  width: 50%;
+}
+.order h4 {
+  font-size: 1.167rem;
+  color: #fff;
+  margin-bottom: 0.417rem;
+}
+.order span {
+  display: block;
+  color: #4c9bfd;
+  font-size: 0.667rem;
+}
+/* 销售区域 */
+.alarms {
+  height: 12.6rem;
+}
+.alarms .caption {
+  display: flex;
+  line-height: 1;
+}
+.alarms h3 {
+  height: 0.75rem;
+  padding-right: 0.75rem;
+  border-right: 0.083rem solid #00f2f1;
+}
+.alarms a {
+  padding: 0.167rem;
+  font-size: 0.667rem;
+  margin: -0.125rem 0 0 0.875rem;
+  border-radius: 0.125rem;
+  color: #0bace6;
+}
+.alarms a.active {
+  background-color: #4c9bfd;
+  color: #fff;
+}
+.alarms .inner {
+  display: flex;
+  flex-direction: column;
+}
+.alarms .chart {
+  flex: 1;
+  padding-top: 0.6rem;
+  position: relative;
+}
+.alarms .label {
+  position: absolute;
+  left: 1.75rem;
+  top: 0.75rem;
+  color: #4996f5;
+  font-size: 0.583rem;
+}
+.alarms .line {
+  width: 100%;
+  height: 100%;
+}
+/* 渠道区块 */
+.wrap {
+  display: flex;
+}
+.channel,
+.quarter {
+  flex: 1;
+  height: 9.667rem;
+}
+.channel {
+  margin-right: 0.833rem;
+}
+.channel .data {
+  overflow: hidden;
+}
+.channel .item {
+  margin-top: 0.85rem;
+}
+.channel .item:first-child {
+  float: left;
+}
+.channel .item:last-child {
+  float: right;
+}
+.channel h4 {
+  color: #fff;
+  font-size: 1.333rem;
+  margin-bottom: 0.2rem;
+}
+.channel small {
+  font-size: 50%;
+}
+.channel span {
+  display: block;
+  color: #4c9bfd;
+  font-size: 0.583rem;
+}
+/* 季度区块 */
+.quarter .inner {
+  display: flex;
+  flex-direction: column;
+  margin: 0 -0.25rem;
+}
+.quarter .chart {
+  flex: 1;
+  padding-top: 0.75rem;
+}
+.quarter .box {
+  position: relative;
+}
+.quarter .label {
+  transform: translate(-50%, -30%);
+  color: #fff;
+  font-size: 1.25rem;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+.quarter .label small {
+  font-size: 50%;
+}
+.quarter .gauge {
+  height: 3.5rem;
+}
+.quarter .data {
+  display: flex;
+  justify-content: space-between;
+}
+.quarter .item {
+  width: 50%;
+}
+.quarter h4 {
+  color: #fff;
+  font-size: 1rem;
+  margin-bottom: 0.4rem;
+}
+.quarter span {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #4c9bfd;
+  font-size: 0.583rem;
+}
+/* 排行榜 */
+.top {
+  height: 11.8rem;
+}
+.top .inner {
+  display: flex;
+}
+.top .all {
+  display: flex;
+  flex-direction: column;
+  width: 7rem;
+  color: #4c9bfd;
+  font-size: 0.6rem;
+  vertical-align: middle;
+}
+.top .all ul {
+  padding-left: 0.5rem;
+  margin-top: 0.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.top .all li {
+  overflow: hidden;
+}
+.top .all [class^="icon-"] {
+  font-size: 1.5rem;
+  vertical-align: middle;
+  margin-right: 0.5rem;
+}
+.top .province {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+}
+.top .province i {
+  padding: 0 0.5rem;
+  margin-top: 0.208rem;
+  float: right;
+  font-style: normal;
+  font-size: 0.583rem;
+  color: #0bace6;
+}
+.top .province s {
+  display: inline-block;
+  transform: scale(0.8);
+  text-decoration: none;
+}
+.top .province .icon-up {
+  color: #dc3c33;
+}
+.top .province .icon-down {
+  color: #36be90;
+}
+.top .province .data {
+  flex: 1;
+  display: flex;
+  margin-top: 0.6rem;
+}
+.top .province ul {
+  flex: 1;
+  line-height: 1;
+  margin-bottom: 0.25rem;
+}
+.top .province ul li {
+  display: flex;
+  justify-content: space-between;
+}
+.top .province ul span {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.top .province ul.sup {
+  font-size: 0.583rem;
+}
+.top .province ul.sup li {
+  color: #4995f4;
+  padding: 0.5rem;
+}
+.top .province ul.sup li.active {
+  color: #a3c6f2;
+  background-color: rgba(10, 67, 188, 0.2);
+}
+.top .province ul.sub {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  font-size: 0.5rem;
+  background-color: rgba(10, 67, 188, 0.2);
+}
+.top .province ul.sub li {
+  color: #52ffff;
+  padding: 0.417rem 0.6rem;
+}
+.clock {
+  position: absolute;
+  top: -1.5rem;
+  right: 1.667rem;
+  font-size: 0.833rem;
+  color: #0bace6;
+}
+.clock i {
+  margin-right: 5px;
+  font-size: 0.833rem;
+}
+@media screen and (max-width: 1600px) {
+  .top span {
+    transform: scale(0.9);
+  }
+  .top .province ul.sup li {
+    padding: 0.4rem 0.5rem;
+  }
+  .top .province ul.sub li {
+    padding: 0.23rem 0.5rem;
+  }
+  .quarter span {
+    transform: scale(0.9);
+  }
+}
+.myHidden {
+  display: none
+}

fonts/icomoon.css

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('icomoon.eot');
+  src:  url('icomoon.eot#iefix') format('embedded-opentype'),
+    url('icomoon.ttf') format('truetype'),
+    url('icomoon.woff') format('woff'),
+    url('icomoon.svg#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dot:before {
+  content: "\e900";
+}
+.icon-cup1:before {
+  content: "\e901";
+}
+.icon-cup2:before {
+  content: "\e902";
+}
+.icon-cup3:before {
+  content: "\e903";
+}
+.icon-clock:before {
+  content: "\e904";
+}
+.icon-down:before {
+  content: "\e905";
+}
+.icon-cube:before {
+  content: "\e906";
+}
+.icon-plane:before {
+  content: "\e907";
+}
+.icon-train:before {
+  content: "\e908";
+}
+.icon-bus:before {
+  content: "\e909";
+}
+.icon-bag:before {
+  content: "\e90a";
+}
+.icon-up:before {
+  content: "\e90b";
+}

index.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>维鼎康联养老看板</title>
+
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/animsition.css">
+    <link rel="stylesheet" href="./fonts/icomoon.css">
+    <!-- <link rel="stylesheet" href="./css/flipclock.css"> -->
+</head>
+
+<body>
+    <div class="header">
+        <div class="title" id="title">维鼎康联养老看板</div>
+    </div>
+    <div class="clearfix"></div>
+    <div class="viewport">        
+        <div class="column">
+            <div class="overview panel">
+                <div class="inner">
+                    <div class="item">
+                        <h4 id="allCount"></h4>
+                        <span>
+                            <i class="icon-dot" style="color: #006cff"></i>
+                            总用户
+                        </span>
+                    </div>
+                    <div class="item">
+                        <h4 id="quarterly-addition"></h4>
+                        <span>
+                            <i class="icon-dot" style="color: #6acca3"></i>
+                            季度新增
+                        </span>
+                    </div>
+                    <div class="item">
+                        <h4 id="monthly-addition"></h4>
+                        <span>
+                            <i class="icon-dot" style="color: #ed3f35"></i>
+                            月度新增
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <!--监控-->
+            <div class="monitor panel">
+                <div class="inner">
+                    <div class="tabs">
+                        <a href="javascript:;" data-index="0" class="active">最新报警</a>
+                    </div>
+                    <div class="content" style="display: block;">
+                        <div class="head">
+                            <span class="col">时间</span>
+                            <span class="col">用户</span>
+                            <span class="col">项目</span>
+<!--                            <span class="col">值</span>-->
+                        </div>
+                        <div class="marquee-view">
+                            <div id="vsLogTable" class="marquee">
+                                <div class="vsLogTemplate row">
+                                    <span class="col vsLogTime"></span>
+                                    <span class="col vsLogUser"></span>
+                                    <span class="col vsLogItem"></span>
+<!--                                    <span class="col vsLogValue"></span>-->
+                                    <span class="icon-dot"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--点位-->
+            <div class="point panel">
+                <div class="inner">
+                    <h3>用户年龄分布</h3>
+                    <div class="chart">
+                        <div class="pie"></div>
+                        <div class="data">
+                            <div class="item">
+                                <h4 id="manCount"></h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35"></i>
+                                    男性
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="womanCount">418</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19"></i>
+                                    女性
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="column">
+            <!-- 地图 -->
+            <div class="map">                
+                <div class="chart">
+                    <div class="geo"></div>
+                </div>
+            </div>
+            <!-- 用户 -->
+            <div class="users panel">
+                <div class="inner">
+                    <h3>报警分布</h3>
+                    <div class="chart">
+                        <div class="bar"></div>
+                        <div class="data">
+                            <div class="item">
+                                <h4 id="dayCount"></h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35"></i>
+                                    今日测量数
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="hourCount"></h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19"></i>
+                                    近1小时
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="column">
+            <div class="order panel">
+                <div class="inner">
+                    <!-- 筛选 -->
+                    <div class="filter">
+                        <a href="javascript:;" data-key="day365" class="active">365天</a>
+                        <a href="javascript:;" data-key="day90">90天</a>
+                        <a href="javascript:;" data-key="day30">30天</a>
+                        <a href="javascript:;" data-key="day7">7天</a>
+                    </div>
+                    <!-- 数据 -->
+                    <div class="data">
+                        <div class="item">
+                            <h4></h4>
+                            <span>
+                                <i class="icon-dot" style="color: #ed3f35;"></i>
+                                测量
+                            </span>
+                        </div>
+                        <div class="item">
+                            <h4></h4>
+                            <span>
+                                <i class="icon-dot" style="color: #eacf19;"></i>
+                                报警
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 报警统计 -->
+            <div class="alarms panel">
+                <div class="inner">
+                    <div class="caption">
+                        <h3>报警统计</h3>
+                        <a href="javascript:;" class="active" data-type="week">周</a>
+                        <a href="javascript:;" data-type="month">月</a>
+                        <a href="javascript:;" data-type="year">年</a>
+
+                    </div>
+                    <div class="chart">
+                        <div class="label"></div>
+                        <div class="line"></div>
+                    </div>
+                </div>
+            </div>
+            <!--异常-->
+            <div class="monitor panel">
+                <div class="inner">
+                    <div class="tabs">
+                        <a href="javascript:;" data-index="0" class="active">体征报警</a>
+                    </div>
+                    <div class="content" style="display: block;">
+                        <div class="head">
+                            <span class="col">时间</span>
+                            <span class="col">用户</span>
+                            <span class="col">项目</span>
+                            <span class="col">值</span>
+                        </div>
+                        <div class="marquee-view">
+                            <div id="errVsLogTable" class="marquee alarms-list">
+                                <div id="errVsLogTemplate" class="row">
+                                    <span class="col errVsLogTime"></span>
+                                    <span class="col errVsLogUser"></span>
+                                    <span class="col errVsLogItem"></span>
+                                    <span class="col errVsLogValue"></span>
+                                    <span class="icon-dot"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>                    
+                </div>
+            </div>
+        </div>
+    </div>
+    <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
+</body>
+
+<script src="./js/jquery.min.js"></script>
+<script src="./js/echarts.min.js"></script>
+<!--<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>-->
+<script src="./js/jquery.animsition.js"></script>
+<script src="./js/bg.js"></script>
+<!-- <script src="./js/flipclock.min.js"></script> -->
+<script src="./js/index.js"></script>
+<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=4lgYDZ9MWQMbTvjX5R5M5pZG"></script>
+<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/extension/bmap.min.js"></script>
+<script src="./js/mymap.js"></script>
+<script src="./js/mapStyleJson.js"></script>
+
+</html>

js/bg.js

@@ -0,0 +1,103 @@
+//宇宙特效
+"use strict";
+var canvas = document.getElementById('canvas'),
+  ctx = canvas.getContext('2d'),
+  w = canvas.width = window.innerWidth,
+  h = canvas.height = window.innerHeight,
+
+  hue = 217,
+  stars = [],
+  count = 0,
+  maxStars = 1300;//星星数量
+
+var canvas2 = document.createElement('canvas'),
+  ctx2 = canvas2.getContext('2d');
+canvas2.width = 100;
+canvas2.height = 100;
+var half = canvas2.width / 2,
+  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
+gradient2.addColorStop(0.025, '#CCC');
+gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
+gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
+gradient2.addColorStop(1, 'transparent');
+
+ctx2.fillStyle = gradient2;
+ctx2.beginPath();
+ctx2.arc(half, half, half, 0, Math.PI * 2);
+ctx2.fill();
+
+// End cache
+
+function random(min, max) {
+  if (arguments.length < 2) {
+    max = min;
+    min = 0;
+  }
+
+  if (min > max) {
+    var hold = max;
+    max = min;
+    min = hold;
+  }
+
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function maxOrbit(x, y) {
+  var max = Math.max(x, y),
+    diameter = Math.round(Math.sqrt(max * max + max * max));
+  return diameter / 2;
+  //星星移动范围，值越大范围越小，
+}
+
+var Star = function() {
+
+  this.orbitRadius = random(maxOrbit(w, h));
+  this.radius = random(60, this.orbitRadius) / 8; 
+  //星星大小
+  this.orbitX = w / 2;
+  this.orbitY = h / 2;
+  this.timePassed = random(0, maxStars);
+  this.speed = random(this.orbitRadius) / 1000000; 
+  //星星移动速度
+  this.alpha = random(2, 10)/1000;
+
+  count++;
+  stars[count] = this;
+}
+
+Star.prototype.draw = function() {
+  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+    twinkle = random(10);
+
+  if (twinkle === 1 && this.alpha > 0) {
+    this.alpha -= 0.05;
+  } else if (twinkle === 2 && this.alpha < 1) {
+    this.alpha += 0.05;
+  }
+
+  ctx.globalAlpha = this.alpha;
+  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
+  this.timePassed += this.speed;
+}
+
+for (var i = 0; i < maxStars; i++) {
+  new Star();
+}
+
+function animation() {
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.globalAlpha = 0.5; //尾巴
+  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
+  ctx.fillRect(0, 0, w, h)
+
+  ctx.globalCompositeOperation = 'lighter';
+  for (var i = 1, l = stars.length; i < l; i++) {
+    stars[i].draw();
+  };
+
+  window.requestAnimationFrame(animation);
+}
+
+animation();

js/index.js

@@ -0,0 +1,808 @@
+const url = "http://47.107.28.109:8006/";
+// const url = "http://127.0.0.1:8006/";
+var myPieEchart = echarts.init($('.pie')[0]); // 饼图
+var myLineEchart = echarts.init($('.line')[0]); // 折线图
+var myBarEchart = echarts.init($('.users .bar')[0]); // 柱状图
+var myMapChart = echarts.init($('.map .geo')[0]); // 地图
+var mapOption; // 地图参数
+var heartbeatTime, breakTime, showTime; // 定时任务
+var partId; // 机构id
+var colorList = ['#00f2f1','#006cff', '#eab408', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'];
+/*大屏*/
+//自调用函数
+(function () {
+    // 1、页面一加载就要知道页面宽度计算
+    var setFont = function () {
+        // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
+        var html = document.documentElement;// 获取html
+        // 获取宽度
+        var width = html.clientWidth;
+        // 判断
+        if (width < 1024) width = 1024
+        if (width > 1920) width = 1920
+        // 设置html的基准值
+        var fontSize = width / 80 + 'px';
+        // 设置给html
+        html.style.fontSize = fontSize;
+    }
+    setFont();
+    $(".geo").height($(".map").height());
+    // 2、页面改变的时候也需要设置
+    // 尺寸改变事件
+    window.onresize = function () {
+        setFont();
+        $(".geo").height($(".map").height());
+    }
+    //时间
+    // $('.clock').FlipClock({
+    //     clockFace: 'TwentyFourHourClock'
+    // });
+})();
+// 请求后台获取数据
+(function () {
+    partId = getQuery("partId");
+    if (partId) {
+        // 连接webSocket
+        initWebSocket();
+        // 打开定时器
+        openTimer();
+    }
+})();
+// 获取看板用户信息
+function getUserInfo() {
+    $.get(url + "bulletinBoard/user_info/" + partId, function (data, status) {
+        console.log(data.partInfo.shop_name);
+        $(".title").text(data.partInfo.shop_name);
+        $("#allCount").text(data.userCount.all_count); // 总用户
+        $("#quarterly-addition").text(data.userCount.quarterly_count); // 季度新增
+        $("#monthly-addition").text(data.userCount.month_count); // 月度新增
+        $("#manCount").text(data.userCount.man_count ? data.userCount.man_count : 0); // 男生人数
+        $("#womanCount").text(data.userCount.woman_count ? data.userCount.woman_count : 0); // 女生人数
+        // 地图人员分布
+        mapOption = initMap();
+        if (data.memberList.length > 0) {
+            var d = []
+            data.memberList.forEach((item, index) => {
+                d.push({
+                    name: item.nickname,
+                    value: item.lng_lat.split(","),
+                    size: 10,
+                    text: formatText(item),
+                })
+            })
+            mapOption.series[1].data = d;
+            // mapOption.bmap.center = [114.08259, 22.356868]; // 114.08259, 22.556868
+            mapOption.bmap.center = d[0].value; // 114.08259, 22.556868
+            mapOption.bmap.zoom = 16;
+        }
+        myMapChart.setOption(mapOption);
+        window.addEventListener('resize', myMapChart.resize);
+
+        // 年龄段饼图
+        var pieOption = initPieChar();
+        pieOption.series[0].data = data.pieData;
+        myPieEchart.setOption(pieOption);
+    });
+}
+// 获取看板事件报警信息
+function getSOSInfo() {
+    $.get(url + "bulletinBoard/sos_info/" + partId, function (data, status) {
+        // 最新事件报警表格
+        var rows = []
+        $.each(data.actionList, function (i, n) {
+            var row = '<div class="row">\n' +
+                '<span class="col">'+unixToDate(n.create_date, "MM-dd hh:mm")+'</span>\n' +
+                '<span class="col">'+n.from_member_name+'</span>\n' +
+                '<span class="col">'+n.from_device_name+'</span>\n' +
+                '<span class="icon-dot"></span>\n' +
+                '</div>';
+            rows.push(row)
+        });
+        $("#vsLogTable").html(rows.join(''))
+        // 报警分布
+        var xData = [], yData = [];
+        data.barList.forEach((item, index) => {
+            xData.push(item.name)
+            yData.push(item.value)
+        })
+        var barOption = initBarChar();
+        barOption.xAxis[0].data = xData;
+        barOption.series[0].data = yData;
+        myBarEchart.setOption(barOption);
+
+        // 动态报警折线图
+        initDynamicAlarm(data);
+    });
+}
+// 获取看板体征信息
+function getLogInfo() {
+    $.get(url + "bulletinBoard/log_info/" + partId, function (data, status) {
+        $("#dayCount").text(data.logCount.day_count); // 今日测量数
+        $("#hourCount").text(data.logCount.hour_count); // 近1小时测量数
+        // 动态测量项
+        initMeasureItem(data);
+        // 体征报警表格
+        var rows = []
+        $.each(data.errVsLogList, function (i, n) {
+            var row = '<div class="row">\n' +
+                '<span class="col">'+unixToDate(n.log_time, "MM-dd hh:mm")+'</span>\n' +
+                '<span class="col">'+n.member_nickname+'</span>\n' +
+                '<span class="col">'+n.param_name+'</span>\n' +
+                '<span class="col">'+n.vs_value+'</span>\n' +
+                '<span class="icon-dot"></span>\n' +
+                '</div>';
+            rows.push(row)
+        });
+        $("#errVsLogTable").html(rows.join(''))
+        // $.each(data.errVsLogList, function (i, n) {
+        //     var row = $("#errVsLogTemplate").clone();
+        //     row.find(".errVsLogTime").text(unixToDate(n.log_time, "MM-dd hh:mm"));
+        //     row.find(".errVsLogUser").text(n.member_nickname);
+        //     row.find(".errVsLogItem").text(n.param_name);
+        //     row.find(".errVsLogValue").text(n.vs_value);
+        //     row.appendTo("#errVsLogTable");
+        // });
+    });
+}
+
+function initWebSocket() {
+    var time = Math.round(new Date()) + "" + Math.round(Math.random()*100);
+    console.log(time)
+    // var s = "ws://127.0.0.1:8006/bulletinBoard/" + time + "/" + partId;
+    var s = "ws://47.107.28.109:8006/bulletinBoard/" + time + "/" + partId;
+    console.log(s)
+    var ws = new WebSocket(s);
+    ws.onopen = function(evt) {
+        console.log("webSocket连接成功 ...");
+        clearInterval(breakTime);
+        breakTime = null;
+        heartbeatTime = setInterval(function () {
+            ws.send("ping");
+        }, 55000);   // 55秒心跳包
+        // 获取看板用户信息
+        getUserInfo();
+        // 获取看板事件报警信息
+        getSOSInfo();
+        // 获取看板体征信息
+        getLogInfo();
+    };
+    ws.onmessage = function(e) {
+        console.log("收到消息: " + e.data);
+        if (e.data === 'pong') {
+            return
+        }
+        // {"address":"广东省深圳市南山区留仙大道大学城创客小镇","ageUnit":"岁","birthday":-189417600,"createTime":1661990011,"data":"15秒红外报警",
+        // "frameId":1155,"id":457,"lngLat":"113.961957,22.579848","memberId":54658,"mobile":"18174091244","named":"小米面","partId":2,
+        // "renewType":"SOS","sex":1,"status":0}
+        const data = JSON.parse(e.data);
+        if (data.renewType === 'SOS') {
+            openSOSMap(data); // 地图高亮
+            getSOSInfo(); // 刷新看板
+        } else if ("LOG") {
+            openSOSMap(data); // 地图高亮
+            getLogInfo(); // 刷新体征
+        } else { // USER
+            getUserInfo(); // 刷新用户
+        }
+    };
+    ws.onclose = function(evt) {
+        console.log("webSocket连接关闭.", breakTime);
+        if (!breakTime) {
+            console.log('新的定时任务....')
+            clearInterval(heartbeatTime);
+            breakTime = setInterval(function () {
+                console.log('正在重连...')
+                initWebSocket();
+            }, 5000);   // 5秒重连一次
+        }
+        // heartbeatTime.
+    };
+}
+// 地图高亮
+function openSOSMap(data) {
+    if (data.lngLat) {
+        var d = []
+        d.push({
+            name: data.named,
+            value: data.lngLat.split(","),
+            size: 20,
+            text: formatSOSText(data),
+        })
+        mapOption.series[0].data = d;
+        mapOption.bmap.center = d[0].value;
+        mapOption.bmap.zoom = 18;
+        myMapChart.setOption(mapOption);
+        myMapChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: 0
+        });
+        clearTimeout(showTime);
+        showTime = setTimeout(clearSOSMap, 15000);
+    }
+}
+// 清除百度地图报警点
+function clearSOSMap() {
+    console.log("我要清除报警高亮点了", mapOption.series[0].data, mapOption.series[1].data[0].value)
+    mapOption.series[0].data = [];
+    mapOption.bmap.center = mapOption.series[1].data[0].value;
+    mapOption.bmap.zoom = 16;
+    myMapChart.setOption(mapOption);
+}
+// 打开定时器
+function openTimer() {
+    // 测量时间段定时器
+    var i = 0, ii = 0;
+    var aclick = $('.order a');
+    setInterval(function () {
+        i++;
+        if (i > 3) {
+            i = 0;
+        }
+        //每3秒调用点击事件
+        aclick.eq(i).click();
+    }, 3000);
+    // 报警统计折线图定时器
+    setInterval(function () {
+        ii++;
+        if (ii > 4) {
+            ii = 0;
+        }
+        $('.alarms .caption a').eq(ii).click();
+    }, 5000);
+}
+
+(function () {
+    //事件委托
+    $('.monitor').on('click', ' a', function () {
+        //点击当前的a 加类名 active  他的兄弟删除类名
+        $(this).addClass('active').siblings().removeClass('active');
+        //获取一一对应的下标 
+        var index = $(this).index();
+        //选取content 然后对应下标的 显示   当前的兄弟.content隐藏
+        $('.content').eq(index).show().siblings('.content').hide();
+    });
+    //滚动
+    //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
+    //      然后动画向上滚动，滚动到一半重新开始滚动
+    //因为选取的是两个marquee  所以要遍历
+    $('.monitor .marquee').each(function (index, dom) {
+        //将每个 的所有子级都复制一遍
+        var rows = $(dom).children().clone();
+        //再将新的到的加入原来的
+        $(dom).append(rows);
+    });
+
+})();
+// 报警分布柱状图
+function initBarChar() {
+    return  {
+        // 工具提示
+        tooltip: {
+            // 触发类型  经过轴触发axis  经过轴触发item
+            trigger: 'item',
+            // 轴触发提示才有效
+            axisPointer: {
+                // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
+                type: 'shadow'
+            }
+        },
+        // 图表边界控制
+        grid: {
+            // 距离 上右下左 的距离
+            left: '0',
+            right: '3%',
+            bottom: '3%',
+            top: '5%',
+            // 大小是否包含文本【类似于boxsizing】
+            containLabel: true,
+            //显示边框
+            show: true,
+            //边框颜色
+            borderColor: 'rgba(0, 240, 255, 0.3)'
+        },
+        // 控制x轴
+        xAxis: [
+            {
+                // 使用类目，必须有data属性
+                type: 'category',
+                // 使用 data 中的数据设为刻度文字
+                data: [],
+                // 刻度设置
+                axisTick: {
+                    // true意思：图形在刻度中间
+                    // false意思：图形在刻度之间
+                    alignWithLabel: false,
+                    show: false
+                },
+                //文字
+                axisLabel: {
+                    color: '#4c9bfd'
+                }
+            }
+        ],
+        // 控制y轴
+        yAxis: [
+            {
+                // 使用数据的值设为刻度文字
+                type: 'value',
+                axisTick: {
+                    // true意思：图形在刻度中间
+                    // false意思：图形在刻度之间
+                    alignWithLabel: false,
+                    show: false
+                },
+                //文字
+                axisLabel: {
+                    color: '#4c9bfd'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(0, 240, 255, 0.3)'
+                    }
+                },
+            }
+        ],
+        // 控制x轴
+        series: [
+            {
+                // series配置
+                // 颜色
+                itemStyle: {
+                    // 提供的工具函数生成渐变颜色
+                    color: new echarts.graphic.LinearGradient(
+                        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
+                        0, 0, 0, 1,
+                        [
+                            {offset: 0, color: '#00fffb'}, // 0 起始颜色
+                            {offset: 1, color: '#0061ce'}  // 1 结束颜色
+                        ]
+                    )
+                },
+                // 图表数据名称
+                name: '报警分布',
+                // 图表类型
+                type: 'bar',
+                // 柱子宽度
+                barWidth: '60%',
+                // 数据
+                data: []
+            }
+        ]
+    };
+}
+// 性别饼图
+function initPieChar() {
+    return  {
+        // 控制提示
+        tooltip: {
+            // 非轴图形，使用item的意思是放到数据对应图形上触发提示
+            trigger: 'item',
+            // 格式化提示内容：
+            // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        // 控制图表
+        series: [
+            {
+                // 图表名称
+                name: '年龄段',
+                // 图表类型
+                type: 'pie',
+                // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
+                // 百分比基于  图表DOM容器的半径
+                radius: ['10%', '70%'],
+                // 图表中心位置 left 50%  top 50% 距离图表DOM容器
+                center: ['50%', '50%'],
+                // 半径模式，另外一种是 area 面积模式
+                roseType: 'radius',
+                // 数据集 value 数据的值 name 数据的名称
+                data: [],
+                //文字调整
+                label: {
+                    fontSize: 10
+                },
+                //引导线
+                labelLine: {
+                    length: 8,
+                    length2: 10
+                }
+            },
+        ],
+        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
+    };
+}
+// 报警统计折线图
+function initLineChar() {
+    return {
+        //鼠标提示工具
+        tooltip: {
+            trigger: 'axis'
+        },
+        xAxis: {
+            // 类目类型
+            type: 'category',
+            // x轴刻度文字
+            data: [],
+            axisTick: {
+                show: false//去除刻度线
+            },
+            axisLabel: {
+                color: '#4c9bfd'//文本颜色
+            },
+            axisLine: {
+                show: false//去除轴线
+            },
+            boundaryGap: false//去除轴内间距
+        },
+        yAxis: {
+            // 数据作为刻度文字
+            type: 'value',
+            axisTick: {
+                show: false//去除刻度线
+            },
+            axisLabel: {
+                color: '#4c9bfd'//文本颜色
+            },
+            axisLine: {
+                show: false//去除轴线
+            },
+            boundaryGap: false//去除轴内间距
+        },
+        //图例组件
+        legend: {
+            textStyle: {
+                color: '#4c9bfd' // 图例文字颜色
+            },
+            right: '10%'//距离右边10%
+        },
+        // 设置网格样式
+        grid: {
+            show: true,// 显示边框
+            top: '20%',
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            borderColor: '#012f4a',// 边框颜色
+            containLabel: true // 包含刻度文字在内
+        },
+        series: [{
+            // 数据
+            data: [],
+            // 图表类型
+            type: 'line',
+            // 圆滑连接
+            smooth: true,
+            itemStyle: {
+                color: '#00f2f1'  // 线颜色
+            }
+        }]
+    };
+}
+// 动态测量项
+function initMeasureItem(data) {
+    // 365天、90、30、7天测量
+    var item = {
+        day365: {
+            count: data.logCount.year_count + data.logCount.year_err_count,
+            errCount: data.logCount.year_err_count
+        },
+        day90: {
+            count: data.logCount.season_count + data.logCount.season_err_count,
+            errCount: data.logCount.season_err_count
+        },
+        day30: {
+            count: data.logCount.month_count + data.logCount.month_err_count,
+            errCount: data.logCount.month_err_count
+        },
+        day7: {
+            count: data.logCount.week_count + data.logCount.week_err_count,
+            errCount: data.logCount.week_err_count
+        }
+    };
+    $('.order .item h4:eq(0)').text(item.day365.count);
+    $('.order .item h4:eq(1)').text(item.day365.errCount);
+    // 点击事件
+    $('.order').on('click', '.filter a', function () {
+        //点击之后加类名
+        $(this).addClass('active').siblings().removeClass('active');
+        // 先获取点击a的 data-key自定义属性
+        var key = $(this).attr('data-key');
+        key = item[key];
+        $('.order .item h4:eq(0)').text(key.count);
+        $('.order .item h4:eq(1)').text(key.errCount);
+    });
+}
+// 动态报警折线图
+function initDynamicAlarm(item) {
+    var lineOption = initLineChar();
+    lineOption.series = [];
+    if (item.week[0].length > 0) {
+        item.week[0].forEach((t, i) => {
+            var d = {
+                name: item.week[2][i],
+                type: 'line',
+                stack: 'year总量' + i,
+                data: t,
+                smooth: true,
+                emphasis: {
+                    focus: 'series',
+                    blurScope: 'coordinateSystem'
+                },
+                itemStyle: {
+                    color: colorList[i]  // 线颜色
+                }
+            };
+            lineOption.series.push(d);
+        });
+    }
+    // lineOption.series[0].data = item.year[0];
+    lineOption.legend.data = item.week[2];
+    lineOption.xAxis.data = item.week[1];
+    var data = {
+        year: item.year,
+        month: item.month,
+        week: item.week
+    };
+    myLineEchart.setOption(lineOption);
+    $('.alarms ').on('click', '.caption a', function () {
+        $(this).addClass('active').siblings('a').removeClass('active');
+        lineOption = initLineChar();
+        //option series   data
+        //获取自定义属性值
+        var k = $(this).attr('data-type');
+        //取出对应的值
+        var key = data[k];
+        //将值设置到 图表中
+        if (key[0].length > 0) {
+            if (k === 'week') {
+                lineOption = initLineChar();
+                myLineEchart.setOption(lineOption);
+            }
+            key[0].forEach((t, i) => {
+                var d = {
+                    name: key[2][i],
+                    type: 'line',
+                    stack: k + '总量' + i,
+                    data: t,
+                    smooth: true,
+                    emphasis: {
+                        focus: 'series',
+                        blurScope: 'coordinateSystem'
+                    },
+                    itemStyle: {
+                        color: colorList[i]  // 线颜色
+                    }
+                }
+                lineOption.series.push(d);
+            })
+
+            // lineOption.series[0].data = key[0];
+        } else {
+            var dd = [];
+             key[1].forEach((t, i) => {
+                 dd.push('0');
+            });
+            lineOption.series.push({
+                name: '',
+                type: 'line',
+                stack: k + '总量0',
+                data: dd,
+                smooth: true,
+                emphasis: {
+                    focus: 'series',
+                    blurScope: 'coordinateSystem'
+                },
+                itemStyle: {
+                    color: '#00f2f1'  // 线颜色
+                }
+            });
+            key[2] = [''];
+        }
+        lineOption.legend.data = key[2];
+        // 坐标修改
+        lineOption.xAxis.data = key[1];
+        //再次调用才能在页面显示
+        myLineEchart.setOption(lineOption);
+    });
+}
+// 初始化百度地图
+function initMap() {
+    return {
+        backgroundColor: 'transparent',
+        title: {
+            text: '用户地图一览',
+            left: 'center',
+            textStyle: {
+                color: '#fff'
+            }
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: function (params) {
+                //console.log(params);
+                return params.data.text
+            }
+        },
+        bmap: {
+            center: [114.25, 30.34],    //地图中心点
+            zoom: 11,       //默认缩放倍数
+            roam: true,    //禁止放大缩小
+            geo: {
+                aspectScale: 0.3
+            },
+            mapStyleV2: {
+                styleJson: returnMapStyleJson()
+            }
+        },
+        series: [
+            {
+                name: '体征告警',
+                type: 'effectScatter',  //气泡动态效果
+                coordinateSystem: 'bmap', // 地图选择项bmap为百度地图
+                data: [],
+                symbolSize: function (val1, val2) {
+                    // console.log(val1,val2)
+                    return val2.data.size;
+                },  //标记大小
+                showEffectOn: 'render', // 配置何时显示特效。 render 绘制完成后显示特效。emphasis 高亮（hover）的时候显示特效。
+                rippleEffect: {
+                    brushType: 'stroke', // 波纹的绘制方式 stroke 和 fill
+                    number: 3,  // 波纹的数量
+                    scale: 5, // 波纹放大的倍数
+                    color: '#8FD1C3'
+                },
+                hoverAnimation: true,
+                label: {
+                    formatter: '{b}',
+                    position: 'right',
+                    show: true
+                },
+                itemStyle: {
+                    color: '#f37b1d',
+                    shadowBlur: 10,
+                    shadowColor: '#333'
+                },
+                zlevel: 1
+            },
+            {
+                name: '正常体征',
+                type: 'scatter',  //气泡静态效果
+                coordinateSystem: 'bmap',
+                data: [],
+                symbolSize: function (val1, val2) {
+                    return val2.data.size;
+                },  //标记的大小
+                label: {
+                    formatter: '{b}',
+                    position: 'right'
+                },
+                itemStyle: {
+                    color: '#ddb926'
+                },
+                emphasis: { // 高亮的图形和标签样式
+                    label: {
+                        show: true
+                    }
+                }
+            }
+        ]
+    };
+}
+// 获取网页链接参数
+function getQuery(name){
+    let reg = new RegExp('(^|&)'+ name + "=([^&]*)", "i");
+    let r = decodeURI(window.location.search.substr(1)).match(reg);
+    if(r!=null) return r[2]; return null;
+}
+// 用户显示文字
+function formatText(item) {
+    var str = "";
+    if (item.address) {
+        str = item.address + "<br/>";
+    }
+    str += item.nickname + "，" + formatSex(item.sex) + (item.birthday ? ("，" + formatAge(item.birthday)) : "");
+    return str;
+}
+// SOS显示报警文字
+function formatSOSText(item) {
+    var str = "";
+    if (item.address) {
+        str = item.address + "<br/>";
+    }
+    str += item.named + "，" + formatSex(item.sex);
+    if (item.birthday) {
+        str += "，" + formatAge(item.birthday);
+    }
+    str += "<br/>";
+    str += "报警内容：" + item.data + "<br/>";
+    if (item.relativeMobile) {
+        str += "联系亲属：" + item.relativeMobile + "<br/>";
+    }
+    if (item.sOSLngLat) {
+        str += "报警位置：" + item.sOSLngLat;
+    }
+    return str;
+}
+// 时间转换
+function unixToDate(unix, format) {
+    if (!unix) return unix
+    var _format = format || 'yyyy-MM-dd hh:mm:ss'
+    const d = new Date(unix * 1000)
+    const o = {
+        'M+': d.getMonth() + 1,
+        'd+': d.getDate(),
+        'h+': d.getHours(),
+        'm+': d.getMinutes(),
+        's+': d.getSeconds(),
+        'q+': Math.floor((d.getMonth() + 3) / 3),
+        S: d.getMilliseconds()
+    }
+    if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
+    for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+    return _format
+}
+// 性别转换
+function formatSex(sex) {
+    return sex === 1 ? '男' : sex === 0 ? '女' : '未知'
+}
+// 生日转换
+function formatAge(birthday) {
+    const data = formatBirthdayToAge(birthday * 1000)
+    return data.age + data.ageunit
+}
+// 将生日转换成年龄
+function formatBirthdayToAge(birthday) {
+    const birth = new Date(birthday)
+    const birthYear = birth.getFullYear() // 出生年
+    const birthMonth = birth.getMonth() + 1 // 出生月
+    const birthDay = birth.getDate() // 出生日
+    const nowYear = new Date().getFullYear() // 出生年
+    const nowMonth = new Date().getMonth() + 1 // 出生月
+    const nowDay = new Date().getDate() // 出生日
+    if (nowYear === birthYear) { // 同年
+        if (nowMonth === birthMonth) { // 同月
+            return {
+                age: nowDay - birthDay,
+                ageunit: '天'
+            }
+        } else {
+            return {
+                age: nowMonth - birthMonth,
+                ageunit: '月'
+            }
+        }
+    } else { // 计算周岁
+        const ageDiff = nowYear - birthYear // 年之差
+        if (ageDiff > 0) {
+            if (nowMonth === birthMonth) { // 同月
+                const dayDiff = nowDay - birthDay// 日之差
+                if (dayDiff < 0) {
+                    return {
+                        age: ageDiff - 1,
+                        ageunit: '岁'
+                    }
+                } else {
+                    return {
+                        age: ageDiff,
+                        ageunit: '岁'
+                    }
+                }
+            } else {
+                const monthDiff = nowMonth - birthMonth // 月之差
+                if (monthDiff < 0) {
+                    return {
+                        age: ageDiff - 1,
+                        ageunit: '岁'
+                    }
+                } else {
+                    return {
+                        age: ageDiff,
+                        ageunit: '岁'
+                    }
+                }
+            }
+        }
+    }
+}
+

js/jquery.animsition.js

@@ -0,0 +1,233 @@
+/*!
+ * animsition v3.4.3
+ * http://blivesta.github.io/animsition/
+ * Licensed under MIT
+ * Author : blivesta
+ * http://blivesta.com/
+ */
+(function($) {
+  "use strict";
+  var namespace = "animsition";
+  var methods = {
+    init: function(options) {
+      options = $.extend({
+        inClass: "fade-in",
+        outClass: "fade-out",
+        inDuration: 1500,
+        outDuration: 800,
+        linkElement: ".animsition-link",
+        loading: true,
+        loadingParentElement: "body",
+        loadingClass: "animsition-loading",
+        unSupportCss: [ "animation-duration", "-webkit-animation-duration", "-o-animation-duration" ],
+        overlay: false,
+        overlayClass: "animsition-overlay-slide",
+        overlayParentElement: "body"
+      }, options);
+      var support = methods.supportCheck.call(this, options);
+      if (!support) {
+        if (!("console" in window)) {
+          window.console = {};
+          window.console.log = function(str) {
+            return str;
+          };
+        }
+        console.log("Animsition does not support this browser.");
+        return methods.destroy.call(this);
+      }
+      var overlayMode = methods.optionCheck.call(this, options);
+      if (overlayMode) {
+        methods.addOverlay.call(this, options);
+      }
+      if (options.loading) {
+        methods.addLoading.call(this, options);
+      }
+      return this.each(function() {
+        var _this = this;
+        var $this = $(this);
+        var $window = $(window);
+        var data = $this.data(namespace);
+        if (!data) {
+          options = $.extend({}, options);
+          $this.data(namespace, {
+            options: options
+          });
+          $window.on("load." + namespace + " pageshow." + namespace, function() {
+            methods.pageIn.call(_this);
+          });
+          $window.on("unload." + namespace, function() {});
+          $(options.linkElement).on("click." + namespace, function(event) {
+            event.preventDefault();
+            var $self = $(this);
+            methods.pageOut.call(_this, $self);
+          });
+        }
+      });
+    },
+    addOverlay: function(options) {
+      $(options.overlayParentElement).prepend('<div class="' + options.overlayClass + '"></div>');
+    },
+    addLoading: function(options) {
+      $(options.loadingParentElement).append('<div class="' + options.loadingClass + '"></div>');
+    },
+    removeLoading: function() {
+      var $this = $(this);
+      var options = $this.data(namespace).options;
+      var $loading = $(options.loadingParentElement).children("." + options.loadingClass);
+      $loading.fadeOut().remove();
+    },
+    supportCheck: function(options) {
+      var $this = $(this);
+      var props = options.unSupportCss;
+      var propsNum = props.length;
+      var support = false;
+      if (propsNum === 0) {
+        support = true;
+      }
+      for (var i = 0; i < propsNum; i++) {
+        if (typeof $this.css(props[i]) === "string") {
+          support = true;
+          break;
+        }
+      }
+      return support;
+    },
+    optionCheck: function(options) {
+      var $this = $(this);
+      var overlayMode;
+      if (options.overlay || $this.data("animsition-overlay")) {
+        overlayMode = true;
+      } else {
+        overlayMode = false;
+      }
+      return overlayMode;
+    },
+    animationCheck: function(data, stateClass, stateIn) {
+      var $this = $(this);
+      var options = $this.data(namespace).options;
+      var dataType = typeof data;
+      var dataDuration = !stateClass && dataType === "number";
+      var dataClass = stateClass && dataType === "string" && data.length > 0;
+      if (dataDuration || dataClass) {
+        data = data;
+      } else if (stateClass && stateIn) {
+        data = options.inClass;
+      } else if (!stateClass && stateIn) {
+        data = options.inDuration;
+      } else if (stateClass && !stateIn) {
+        data = options.outClass;
+      } else if (!stateClass && !stateIn) {
+        data = options.outDuration;
+      }
+      return data;
+    },
+    pageIn: function() {
+      var _this = this;
+      var $this = $(this);
+      var options = $this.data(namespace).options;
+      var thisInDuration = $this.data("animsition-in-duration");
+      var thisInClass = $this.data("animsition-in");
+      var inDuration = methods.animationCheck.call(_this, thisInDuration, false, true);
+      var inClass = methods.animationCheck.call(_this, thisInClass, true, true);
+      var overlayMode = methods.optionCheck.call(_this, options);
+      if (options.loading) {
+        methods.removeLoading.call(_this);
+      }
+      if (overlayMode) {
+        methods.pageInOverlay.call(_this, inClass, inDuration);
+      } else {
+        methods.pageInBasic.call(_this, inClass, inDuration);
+      }
+    },
+    pageInBasic: function(inClass, inDuration) {
+      var $this = $(this);
+      $this.css({
+        "animation-duration": inDuration / 1e3 + "s"
+      }).addClass(inClass).animateCallback(function() {
+        $this.removeClass(inClass).css({
+          opacity: 1
+        });
+      });
+    },
+    pageInOverlay: function(inClass, inDuration) {
+      var $this = $(this);
+      var options = $this.data(namespace).options;
+      $this.css({
+        opacity: 1
+      });
+      $(options.overlayParentElement).children("." + options.overlayClass).css({
+        "animation-duration": inDuration / 1e3 + "s"
+      }).addClass(inClass);
+    },
+    pageOut: function($self) {
+      var _this = this;
+      var $this = $(this);
+      var options = $this.data(namespace).options;
+      var selfOutClass = $self.data("animsition-out");
+      var thisOutClass = $this.data("animsition-out");
+      var selfOutDuration = $self.data("animsition-out-duration");
+      var thisOutDuration = $this.data("animsition-out-duration");
+      var isOutClass = selfOutClass ? selfOutClass : thisOutClass;
+      var isOutDuration = selfOutDuration ? selfOutDuration : thisOutDuration;
+      var outClass = methods.animationCheck.call(_this, isOutClass, true, false);
+      var outDuration = methods.animationCheck.call(_this, isOutDuration, false, false);
+      var overlayMode = methods.optionCheck.call(_this, options);
+      var url = $self.attr("href");
+      if (overlayMode) {
+        methods.pageOutOverlay.call(_this, outClass, outDuration, url);
+      } else {
+        methods.pageOutBasic.call(_this, outClass, outDuration, url);
+      }
+    },
+    pageOutBasic: function(outClass, outDuration, url) {
+      var $this = $(this);
+      $this.css({
+        "animation-duration": outDuration / 1e3 + "s"
+      }).addClass(outClass).animateCallback(function() {
+        location.href = url;
+      });
+    },
+    pageOutOverlay: function(outClass, outDuration, url) {
+      var _this = this;
+      var $this = $(this);
+      var options = $this.data(namespace).options;
+      var thisInClass = $this.data("animsition-in");
+      var inClass = methods.animationCheck.call(_this, thisInClass, true, true);
+      $(options.overlayParentElement).children("." + options.overlayClass).css({
+        "animation-duration": outDuration / 1e3 + "s"
+      }).removeClass(inClass).addClass(outClass).animateCallback(function() {
+        $this.css({
+          opacity: 0
+        });
+        location.href = url;
+      });
+    },
+    destroy: function() {
+      return this.each(function() {
+        var $this = $(this);
+        $(window).unbind("." + namespace);
+        $this.css({
+          opacity: 1
+        }).removeData(namespace);
+      });
+    }
+  };
+  $.fn.animateCallback = function(callback) {
+    var end = "animationend webkitAnimationEnd mozAnimationEnd oAnimationEnd MSAnimationEnd";
+    return this.each(function() {
+      $(this).bind(end, function() {
+        $(this).unbind(end);
+        return callback.call(this);
+      });
+    });
+  };
+  $.fn.animsition = function(method) {
+    if (methods[method]) {
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    } else if (typeof method === "object" || !method) {
+      return methods.init.apply(this, arguments);
+    } else {
+      $.error("Method " + method + " does not exist on jQuery." + namespace);
+    }
+  };
+})(jQuery);

js/mymap.js

@@ -0,0 +1,239 @@
+var myChart = echarts.init($('.map .geo')[0])
+var option;
+
+var data1 = [
+    // { name: '点1', value: [114.31, 30.52], size: 20, text: '武汉市江汉区三个街道<br/>张三，男，56岁<br/>血糖9' },
+    // { name: '点2', value: [114.25, 30.44], size: 20, text: '武汉市江汉区二个街道<br/>李四，男，46岁<br/>血压180/120' },
+    // { name: '点3', value: [114.22, 30.62], size: 20, text: '武汉市江汉区一个街道<br/>王丫，女，36岁<br/>体温37.1' },
+];
+var data2 = [
+    { name: '点4', value: [114.32, 30.46], size: 10, text: '武汉市江汉区三个街道<br/>张三，男，56岁<br/>血糖9' },
+    { name: '点5', value: [114.34, 30.54], size: 10, text: '武汉市江汉区二个街道<br/>李四，男，46岁<br/>血压180/120' },
+    { name: '点6', value: [114.37, 30.58], size: 10, text: '武汉市江汉区一个街道<br/>王丫，女，36岁<br/>体温37.1' }
+];
+
+option = {
+    backgroundColor: 'transparent',
+    title: {
+        text: '用户地图一览',
+        left: 'center',
+        textStyle: {
+            color: '#fff'
+        }
+    },
+    tooltip: {
+        trigger: 'item',
+        formatter: function (params) {
+            //console.log(params);
+            return params.data.text
+        }
+    },
+    bmap: {
+        center: [114.25, 30.34],    //地图中心点
+        zoom: 11,       //默认缩放倍数
+        roam: true,    //禁止放大缩小
+        mapStyle: {
+            styleJson: [
+                {
+                    featureType: 'water',
+                    elementType: 'all',
+                    stylers: {
+                        color: '#044161'
+                    }
+                },
+                {
+                    featureType: 'land',
+                    elementType: 'all',
+                    stylers: {
+                        color: '#004981'
+                    }
+                },
+                {
+                    featureType: 'boundary',
+                    elementType: 'geometry',
+                    stylers: {
+                        color: '#064f85'
+                    }
+                },
+                {
+                    featureType: 'railway',
+                    elementType: 'all',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'highway',
+                    elementType: 'geometry',
+                    stylers: {
+                        color: '#004981'
+                    }
+                },
+                {
+                    featureType: 'highway',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                        color: '#005b96',
+                        lightness: 1
+                    }
+                },
+                {
+                    featureType: 'highway',
+                    elementType: 'labels',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'arterial',
+                    elementType: 'geometry',
+                    stylers: {
+                        color: '#004981'
+                    }
+                },
+                {
+                    featureType: 'arterial',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                        color: '#00508b'
+                    }
+                },
+                {
+                    featureType: 'poi',
+                    elementType: 'all',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'green',
+                    elementType: 'all',
+                    stylers: {
+                        color: '#056197',
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'subway',
+                    elementType: 'all',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'manmade',
+                    elementType: 'all',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'local',
+                    elementType: 'all',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'arterial',
+                    elementType: 'labels',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                },
+                {
+                    featureType: 'boundary',
+                    elementType: 'geometry.fill',
+                    stylers: {
+                        color: '#029fd4'
+                    }
+                },
+                {
+                    featureType: 'building',
+                    elementType: 'all',
+                    stylers: {
+                        color: '#1a5787'
+                    }
+                },
+                {
+                    featureType: 'label',
+                    elementType: 'all',
+                    stylers: {
+                        visibility: 'off'
+                    }
+                }
+            ]
+        }
+    },
+    series: [
+        {
+            name: '体征告警',
+            type: 'effectScatter',  //气泡动态效果
+            coordinateSystem: 'bmap', // 地图选择项bmap为百度地图
+            data: data1,
+            symbolSize: function (val1, val2) {
+                // console.log(val1,val2)
+                return val2.data.size;
+            },  //标记大小
+            showEffectOn: 'render', // 配置何时显示特效。 render 绘制完成后显示特效。emphasis 高亮（hover）的时候显示特效。
+            rippleEffect: {
+                brushType: 'stroke', // 波纹的绘制方式 stroke 和 fill
+                number: 3,  // 波纹的数量
+                scale: 5, // 波纹放大的倍数
+                color: '#8FD1C3'
+            },
+            hoverAnimation: true,
+            label: {
+                formatter: '{b}',
+                position: 'right',
+                show: true
+            },
+            itemStyle: {
+                color: '#f37b1d',
+                shadowBlur: 10,
+                shadowColor: '#333'
+            },
+            zlevel: 1
+        },
+        {
+            name: '正常体征',
+            type: 'scatter',  //气泡静态效果
+            coordinateSystem: 'bmap',
+            data: data2,
+            symbolSize: function (val1, val2) {
+                return val2.data.size;
+            },  //标记的大小
+            label: {
+                formatter: '{b}',
+                position: 'right'
+            },
+            itemStyle: {
+                color: '#ddb926'
+            },
+            emphasis: { // 高亮的图形和标签样式
+                label: {
+                    show: true
+                }
+            }
+        }
+    ]
+};
+
+if (option && typeof option === 'object') {
+    myChart.setOption(option);
+
+    var index = 0; //播放所在下标
+    var mTime = setInterval(function () {
+        myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index
+        });
+        index++;
+        if (index > data1.length) {
+            index = 0;
+        }
+    }, 2000);   //2秒循环
+}
+
+window.addEventListener('resize', myChart.resize);