聚合平台

public/aggbi/css/index.css

@@ -0,0 +1,511 @@
+body{
+    line-height: 1.15;
+    font-size: 0.5rem;
+    margin: 0;
+    padding: 0;
+    background-repeat: no-repeat;
+    background-position: 0 0 / cover;
+    background-color: #101129;
+}
+*{
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+}
+ul{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+.viewport {
+    /* 限定大小 */
+    min-width: 1024px;
+    max-width: 1920px;
+    min-height: 780px;
+    margin: 0 auto;
+    background: url(../images/logo1.png) no-repeat 0 0 / contain;
+    display: flex;
+    padding: 3.667rem 0.833rem 0;
+}
+.column{
+    flex: 3;
+    position: relative;
+    margin-top: 3rem;
+}
+.column:nth-child(2){
+    flex: 4;
+    margin-left:0.833rem;
+    margin-right:0.833rem;
+}
+.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;
+}
+
+/* 订单 */
+.order {
+  height: 7rem;
+}
+.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%;
+  text-align: center;
+}
+.order h4 {
+  font-size: 1.167rem;
+  color: #fff;
+  margin-bottom: 0.417rem;
+}
+.order span {
+  display: block;
+  color: #4c9bfd;
+  font-size: 0.667rem;
+}
+/* ------------------------------------------------------------动画 */
+@keyframes row{
+  0%{}
+  100%{
+    transform: translateY(-50%);
+  }
+}
+/* 调用动画 */
+.monitor .marquee {
+  /* //infinite永久调用动画 */
+  animation: row  10s linear infinite;
+}
+/*鼠标划入 停止动画  */
+.monitor .marquee:hover {
+  animation-play-state: paused;
+}
+/* 点位 */
+.point {
+  height: 14rem;
+}
+.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: 28.8rem;
+  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: 100%;
+}
+/* 用户模块 */
+.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;
+}
+/* 销售区域 */
+.sales {
+  height: 14rem;
+}
+.sales .caption {
+  display: flex;
+  line-height: 1;
+}
+.sales h3 {
+  height: 0.75rem;
+  padding-right: 0.75rem;
+  /* border-right: 0.083rem solid #00f2f1; */
+}
+.sales a {
+  padding: 0.167rem;
+  font-size: 0.667rem;
+  margin: -0.125rem 0 0 0.875rem;
+  border-radius: 0.125rem;
+  color: #0bace6;
+}
+.sales a.active {
+  background-color: #4c9bfd;
+  color: #fff;
+}
+.sales .inner {
+  display: flex;
+  flex-direction: column;
+}
+.sales .chart {
+  flex: 1;
+  padding-top: 0.6rem;
+  position: relative;
+}
+.sales .label {
+  position: absolute;
+  left: 1.75rem;
+  top: 0.75rem;
+  color: #4996f5;
+  font-size: 0.583rem;
+}
+.sales .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);
+  }
+}

public/aggbi/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";
+}

public/aggbi/fonts/icomoon.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="857.6" descent="-166.4" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="dot" d="M510-44.4v0c-109.2 0-198.8 89.2-198.8 198.8v395.2c0 109.2 89.2 198.8 198.8 198.8v0c109.2 0 198.8-89.2 198.8-198.8v-395.6c0-109.2-89.6-198.4-198.8-198.4z" />
+<glyph unicode="&#xe901;" glyph-name="cup1" d="M824.4 674c0 68.8-56.4 124.8-124.8 124.8h-375.6c-68.8 0-124.8-56.4-124.8-124.8-214 0-187.6 0-187.6-124.8 0-103.2 84.4-187.6 187.6-187.6 8 0 14 1.6 22 1.6 42-122 140.8-232.8 259.2-250v-145.2h-93.6c-17.2 0-31.2-14-31.2-31.2s14-31.2 31.2-31.2h250c17.2 0 31.2 14 31.2 31.2s-14 31.2-31.2 31.2h-93.6v145.2c118.8 17.2 217.2 126.4 259.2 250 6.4 0 14-1.6 22-1.6 103.2 0 187.6 84.4 187.6 187.6-2 124.8 24.8 124.8-187.6 124.8zM199.2 424c-68.8 0-125.2 56-125.2 124.8s1.6 62.4 124.8 62.4l0.4-187.2zM578.8 296h-94.4v202.4c0 29.2-0.8 46.8-2 52.8-1.6 6-5.2 10.4-11.6 13.6s-20.4 4.4-42 4.4h-9.2v44c45.6 10 80 30 103.6 60.4h55.6v-377.6zM824.4 424v187.2c123.6 0 124.8 6.4 124.8-62.4-1.6-68.8-56.4-124.8-124.8-124.8z" />
+<glyph unicode="&#xe902;" glyph-name="cup2" d="M824.4 674c0 68.8-56.4 124.8-124.8 124.8h-375.6c-68.8 0-124.8-56.4-124.8-124.8-214 0-187.6 0-187.6-124.8 0-103.2 84.4-187.6 187.6-187.6 8 0 14 1.6 22 1.6 42-122 140.8-232.8 259.2-250v-145.2h-93.6c-17.2 0-31.2-14-31.2-31.2s14-31.2 31.2-31.2h250c17.2 0 31.2 14 31.2 31.2s-14 31.2-31.2 31.2h-93.6v145.2c118.8 17.2 217.2 126.4 259.2 250 6.4 0 14-1.6 22-1.6 103.2 0 187.6 84.4 187.6 187.6-2 124.8 24.8 124.8-187.6 124.8zM74 548.8c0 68.8 1.6 62.4 124.8 62.4l0.4-187.2c-68.8 0-125.2 56-125.2 124.8zM618 359.2v-63.6h-205.2v53.2c60.8 99.6 96.8 161.2 108.4 184.8s17.2 42 17.2 55.2c0 10-1.6 17.6-5.2 22.8s-8.8 7.6-16 7.6-12.4-2.8-16-8.4c-3.6-5.6-5.2-16.4-5.2-33.2v-35.6h-83.6v14c0 20.8 1.2 37.6 3.2 49.6s7.6 24 16 35.6 19.6 20.4 33.2 26.4 29.6 9.2 48.8 9.2c37.2 0 65.2-9.2 84-27.6 19.2-18.4 28.4-41.6 28.4-70 0-21.6-5.2-44-16-68s-42.4-74.4-94.4-152h102.4zM824.4 424v187.2c123.6 0 124.8 6.4 124.8-62.4-1.6-68.8-56.4-124.8-124.8-124.8z" />
+<glyph unicode="&#xe903;" glyph-name="cup3" d="M824.4 674c0 68.8-56.4 124.8-124.8 124.8h-375.6c-68.8 0-124.8-56.4-124.8-124.8-214 0-187.6 0-187.6-124.8 0-103.2 84.4-187.6 187.6-187.6 8 0 14 1.6 22 1.6 42-122 140.8-232.8 259.2-250v-145.2h-93.6c-17.2 0-31.2-14-31.2-31.2s14-31.2 31.2-31.2h250c17.2 0 31.2 14 31.2 31.2s-14 31.2-31.2 31.2h-93.6v145.2c118.8 17.2 217.2 126.4 259.2 250 6.4 0 14-1.6 22-1.6 103.2 0 187.6 84.4 187.6 187.6-2 124.8 24.8 124.8-187.6 124.8zM74 548.8c0 68.8 1.6 62.4 124.8 62.4l0.4-187.2c-68.8 0-125.2 56-125.2 124.8zM620 337.2c-6.8-16.4-18.4-28.8-35.2-37.6-16.8-8.4-38-12.8-64-12.8-29.6 0-52.8 4.8-69.6 14.8s-28 22-33.2 36.4-8 39.2-8 74.8v29.6h93.2v-60.8c0-16 0.8-26.4 2.8-30.8s6-6.4 12.8-6.4c7.2 0 12 2.8 14.4 8.4s3.6 20 3.6 43.6v26c0 14.4-1.6 24.8-4.8 31.6s-8 10.8-14.4 13.2c-6.4 2-18.4 3.2-36.8 3.6v53.6c22 0 36 0.8 41.2 2.4s9.2 5.2 11.2 11.2c2.4 5.6 3.6 14.8 3.6 26.8v20.8c0 13.2-1.2 21.6-4 26-2.8 4-6.8 6.4-12.4 6.4-6.4 0-10.8-2-13.2-6.4s-3.6-13.6-3.6-28v-30.8h-93.2v32c0 35.6 8 60 24.4 72.4s42.4 18.8 78 18.8c44.4 0 74.8-8.8 90.4-26 16-17.2 23.6-41.6 23.6-72.4 0-20.8-2.8-36-8.4-45.2s-15.6-18-30-25.6c14-4.8 24.8-12.4 31.6-23.6 6.8-10.8 10.4-36.4 10.4-76.4-0.4-30.4-3.6-53.2-10.4-69.6zM824.4 424v187.2c123.6 0 124.8 6.4 124.8-62.4-1.6-68.8-56.4-124.8-124.8-124.8z" />
+<glyph unicode="&#xe904;" glyph-name="clock" d="M502.898 788.907c-245.76 0-443.733-197.973-443.733-443.733s200.249-443.733 443.733-443.733c245.76 0 443.733 197.973 443.733 443.733s-200.249 443.733-443.733 443.733zM791.893 210.916c-6.827-13.653-18.204-20.48-31.858-20.48-4.551 0-9.102 0-13.653 2.276l-261.689 118.329c-11.378 4.551-20.48 18.204-20.48 31.858v245.76c0 18.204 15.929 34.133 34.133 34.133s34.133-15.929 34.133-34.133v-225.28l241.209-109.227c18.204-6.827 25.031-25.031 18.204-43.236z" />
+<glyph unicode="&#xe905;" glyph-name="down" d="M174.56 163.976l288.192-242.864c26.864-22.384 70.512-22.384 97.368 0l288.192 242.864c43.088 36.936 12.312 99.608-48.128 99.608h-110.24v448.8c0 49.248-40.288 89.536-89.536 89.536h-179.072c-49.248 0-89.536-40.288-89.536-89.536v-448.8h-109.12c-61-0.56-91.216-63.232-48.128-99.608z" />
+<glyph unicode="&#xe906;" glyph-name="cube" d="M930.8 632.4c-2 1.2-4.4 2.4-6.4 3.2l-378 219.6c-21.2 12-47.2 12-68.4 0l-384.8-222.8c-21.2-12.4-34.4-34.8-34-59.2l1.2-442.4c0-24.4 12.8-47.2 34-59.2l378.4-219.6c1.6-1.2 3.2-2 4.8-3.2 3.6-2 7.6-3.6 11.6-5.2 0 0 0.4 0 0.4 0 0.4 0 1.2-0.4 1.6-0.4 6.4-2 12.8-3.2 19.6-3.2 0 0 0 0 0 0 0.4 0 0.8 0 0.8 0v0c12 0 23.6 2.8 34 8.8l385.2 222.4c21.2 12.4 34.4 34.8 34 59.2v442.8c0.4 24.4-12.8 47.2-34 59.2zM512.4 716.4l246.4-143.2-248.4-143.2-61.6 36-184.8 107.2 248.4 143.2zM829.2 169.6l-249.2-143.2v285.2l249.2 143.2v-285.2z" />
+<glyph unicode="&#xe907;" glyph-name="plane" d="M937.2 777.6c-22 18.4-53.2 20.8-93.6 7.6s-76.8-36-108.8-68.4l-101.2-101.2-421.6 100.8c-7.2 1.6-13.2 0.8-19.2-5.2l-80.8-81.2c-4.4-4.4-6.4-10-5.6-17.2 1.2-6.8 5.2-12 10.8-15.2l321.6-176.8-164-164-122.8 33.6c-0.8 0.8-2.4 0.8-5.2 0.8-5.6 0-10.8-2-14.4-5.6l-61.2-61.6c-4.8-4.8-6.4-10-5.6-16 0.8-6.8 4-11.2 8.4-14.4l159.6-119.6 119.6-159.6c3.6-4.8 8.8-7.6 15.2-8.4h1.2c5.6 0 10.8 2 14.4 5.6l60.8 60.8c5.6 5.6 6.8 12.8 5.2 19.6l-33.6 122.8 164 164 176.8-321.6c3.2-5.6 6.8-8.8 13.2-10 1.2-0.8 2.4-0.8 4.4-0.8 5.2 0 8.8 1.2 12 4l81.2 60.8c7.2 5.6 9.6 12.8 7.6 20.8l-101.2 440.8 102 102c32.4 32.4 55.2 68.4 68.4 108.8 13.2 40.8 10.8 72-7.6 94z" />
+<glyph unicode="&#xe908;" glyph-name="train" d="M576 237.2v-256h277.2c35.2 0 64-28.8 64-64s-28.8-64-64-64h-682.4c-35.2 0-64 28.8-64 64s28.8 64 64 64h277.2v256h-64c-35.2 0-64 28.8-64 64s28.8 64 64 64h256c35.2 0 64-28.8 64-64s-28.8-64-64-64h-64zM427.6 784c7.2 46.4 50.8 78.4 97.6 71.2 36.8-5.6 65.2-34.4 71.2-71.2 88-16.8 169.2-59.6 232.4-123.2 174.8-174.8 174.8-458.4 0-633.6-24.8-24.8-65.6-24.8-90.4 0s-24.8 65.6 0 90.4v0c124.8 124.8 124.8 327.6 0 452.4s-327.6 124.8-452.4 0-124.8-327.6 0-452.4c0 0 0 0 0 0 24.8-24.8 24.8-65.6 0-90.4s-65.6-24.8-90.4 0c-175.2 174.8-175.2 458.4-0.4 633.6 63.2 63.2 144.4 106.4 232.4 123.2v0z" />
+<glyph unicode="&#xe909;" glyph-name="bus" d="M203.902 20.316c-76.37 13.852-131.4 80.862-131.026 158.354l3.744 479.182c0.748 87.6 72.252 158.354 159.852 158.354h551.058c87.6 0 159.104-70.754 159.852-158.354l3.744-479.182c0.374-69.631-43.8-131.4-110.062-153.114l31.072-53.534c16.846-28.452 7.112-65.138-21.338-81.984s-65.138-7.112-81.984 21.338c0 0.374-0.374 0.374-0.374 0.748l-59.898 103.698c-0.374 0.748-0.748 1.124-1.124 1.872h-366.874c-0.374-0.748-0.748-1.498-1.124-1.872l-59.898-103.698c-16.472-28.826-52.784-38.934-81.61-22.462s-38.934 52.784-22.462 81.61c0 0.374 0.374 0.374 0.374 0.748l28.077 48.292zM452.102 656.354h-279.648c-10.856 0-19.842-8.984-19.842-19.842v0-239.59c0-10.856 8.984-19.842 19.842-19.842v0h279.648c10.856 0 19.842 8.984 19.842 19.842v0 239.59c0 10.856-8.984 19.842-19.842 19.842 0 0 0 0 0 0zM851.544 656.354h-279.648c-10.856 0-19.842-8.984-19.842-19.842v0-239.59c0-10.856 8.984-19.842 19.842-19.842 0 0 0 0 0 0h279.648c10.856 0 19.842 8.984 19.842 19.842v0 239.59c0 10.856-8.984 19.842-19.842 19.842 0 0 0 0 0 0zM731.75 296.97c-32.944 0-59.898-26.954-59.898-59.898s26.954-59.898 59.898-59.898 59.898 26.954 59.898 59.898-26.954 59.898-59.898 59.898zM292.25 296.97c-32.944 0-59.898-26.954-59.898-59.898s26.954-59.898 59.898-59.898 59.898 26.954 59.898 59.898-26.58 59.898-59.898 59.898z" />
+<glyph unicode="&#xe90a;" glyph-name="bag" d="M816.928 591.86h-87.137c0 120.346-97.563 218.028-217.791 218.028s-217.791-97.681-217.791-218.028h-87.137c-47.902 0-86.659-39.26-86.659-87.231l-0.478-523.315c0.109-48.101 39.043-87.067 87.119-87.231h609.844c48.090 0.163 87.028 39.13 87.137 87.222v523.299c-0.109 48.101-39.043 87.067-87.119 87.231h-0.017zM512 722.682c0.034 0 0.079 0 0.119 0 72.12 0 130.585-58.465 130.585-130.585 0-0.084 0-0.168 0-0.252v0.011h-261.406c0 0.069 0 0.153 0 0.237 0 72.12 58.465 130.585 130.585 130.585 0.040 0 0.084 0 0.124 0h-0.006zM512 286.577c-120.228 0-217.791 97.681-217.791 218.077h87.112c0-0.079 0-0.17 0-0.261 0-72.12 58.465-130.585 130.585-130.585 0.040 0 0.084 0 0.124 0h-0.006c0.022 0 0.048 0 0.074 0 72.12 0 130.585 58.465 130.585 130.585 0 0.084 0 0.168 0 0.252v-0.011h87.137c0-120.371-97.588-218.052-217.816-218.052z" />
+<glyph unicode="&#xe90b;" glyph-name="up" d="M848.728 541.856l-288.368 242.696c-26.864 22.392-70.752 22.392-97.616 0l-288.368-242.696c-42.984-36.72-12.536-99.408 48.36-99.408h110.152c0 0 0-0.896 0-0.896v-447.776c0-49.256 40.296-89.552 89.552-89.552h179.112c49.256 0 89.552 40.296 89.552 89.552v447.776c0 0 0 0.896 0 0.896h109.256c60.896 0 91.344 62.688 48.36 99.408z" />
+</font></defs></svg>

public/aggbi/index.html

@@ -0,0 +1,203 @@
+<!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="./fonts/icomoon.css">
+    </head>
+
+    <body>
+        <div class="viewport">
+            <div class="column">
+                <div class="order panel">
+                    <div class="inner">
+                        <div class="caption">
+                            <h3>求职者</h3>
+                        </div>
+                        <div class="data">
+                            <div class="item">
+                                <h4 class="resume_sex-total">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    总人数
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="resume_sex-male">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    男
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="resume_sex-female">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #9fe6b8;"></i>
+                                    女
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="sales panel">
+                    <div class="inner">
+                        <div class="caption">
+                            <h3>求职工种</h3>
+                        </div>
+                        <div class="chart">
+                            <div class="line resume_trade"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="point panel">
+                    <div class="inner">
+                        <h3>求职分布</h3>
+                        <div class="chart">
+                            <span>年龄分布</span>
+                            <span>学历分布</span>
+                        </div>
+                        <div class="chart">
+                            <div class="pie age resume_age"></div>
+                            <div class="pie age resume_education"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <!-- 零工 -->
+                <div class="order panel">
+                    <div class="inner">
+                        <div class="caption">
+                            <h3>零工</h3>
+                        </div>
+                        <div class="data">
+                            <div class="item">
+                                <h4 class="odd_job_number">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    求职者
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="odd_job_company">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    企业
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="odd_job_job">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #9fe6b8;"></i>
+                                    发布岗位
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 地图 -->
+                <div class="map">
+                    <h3>
+                        <span class="icon-cube"></span>
+                        晋江人力大数据地图
+                    </h3>
+                    <div class="chart">
+                        <div class="geo"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="column">
+                <!-- 订单 -->
+                <div class="order panel">
+                    <div class="inner">
+                        <div class="caption">
+                            <h3>招考</h3>
+                        </div>
+                        <div class="data">
+                            <div class="item">
+                                <h4 class="recruit_count">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    招考场次
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="recruit_post">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    招考岗位
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="recruit_apply">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #9fe6b8;"></i>
+                                    报名总人数
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+               
+                <!--点位-->
+                <div class="point panel">
+                    <div class="inner">
+                        <h3>考生年龄分布</h3>
+                        <div class="chart">
+                            <div class="pie age recruit_age"></div>
+                            <div class="data">
+                                <div class="item">
+                                    <h4 class="age-gt35"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #ed3f35"></i>
+                                        35岁及以下
+                                    </span>
+                                </div>
+                                <div class="item">
+                                    <h4 class="age-lt35"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #eacf19"></i>
+                                        35岁以上
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--点位-->
+                <div class="point panel">
+                    <div class="inner">
+                        <h3>考生学历分布</h3>
+                        <div class="chart">
+                            <div class="pie edu recruit_education"></div>
+                            <div class="data">
+                                <div class="item">
+                                    <h4 class="edu-unknown"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #ed3f35"></i>
+                                        未知学历
+                                    </span>
+                                </div>
+                                <div class="item">
+                                    <h4 class="edu-total"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #eacf19"></i>
+                                        学历统计
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
+    <script src="./js/index.js"></script>
+
+</html>

public/aggbi/js/index.js

@@ -0,0 +1,447 @@
+//自调用函数
+(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();
+	// 2、页面改变的时候也需要设置
+	// 尺寸改变事件
+	window.onresize = function() {
+		setFont();
+	}
+})();
+$.get('https://www.jucai.gov.cn/api/config/bi/agg', (res) => {
+	agg_init(res)
+});
+$.get('https://linggong.jinjianghc.com/mainapp.php/screen/agg', (res) => {
+	odd_init(res.data)
+});
+
+function agg_init(data) {
+	$('.resume_sex-total').text(data.resume_sex[3].count);
+	$('.resume_sex-male').text(data.resume_sex[1].count);
+	$('.resume_sex-female').text(data.resume_sex[2].count);
+	$('.recruit_count').text(data.recruit_count);
+	$('.recruit_post').text(data.recruit_post);
+	$('.recruit_apply').text(data.recruit_apply);
+	this.resume_trade(data.resume_trade);
+	this.resume_age(data.resume_age);
+	this.resume_education(data.resume_education);
+	this.pieAge(data);
+	this.pieEdu(data);
+}
+
+function odd_init(data) {
+	this.geo(data);
+	this.odd_total(data);
+}
+
+function resume_trade(data) {
+	let titleArr = [];
+	let countArr = [];
+	data.forEach((item, index) => {
+		titleArr.push(item.name)
+		countArr.push(item.count)
+	});
+	var option = {
+		//鼠标提示工具
+		tooltip: {
+			trigger: 'axis'
+		},
+		xAxis: {
+			// 类目类型
+			type: 'category',
+			// x轴刻度文字
+			data: titleArr,
+			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: [{
+			name: '求职人数',
+			// 数据
+			data: countArr,
+			// 图表类型
+			type: 'line',
+			// 圆滑连接
+			smooth: true,
+			itemStyle: {
+				color: '#00f2f1' // 线颜色
+			}
+		}]
+	};
+	var myechart = echarts.init($('.resume_trade')[0]);
+	myechart.setOption(option);
+}
+
+function resume_age(data) {
+	let unknown = 0;
+	let total = 0;
+	data.map((item, index) => {
+		if (item.name == '其他') {
+			unknown += item.count;
+			//其他数据
+			item.value = item.count;
+		} else {
+			total += item.count;
+			item.value = item.count;
+		}
+		return item;
+	});
+	var myechar = echarts.init($('.resume_age')[0]);
+	option = {
+		// 控制提示
+		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: data,
+			//文字调整
+			label: {
+				fontSize: 10
+			},
+			//引导线
+			labelLine: {
+				length: 8,
+				length2: 10
+			}
+		}],
+		color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
+	};
+	myechar.setOption(option);
+}
+
+function resume_education(data) {
+	let unknown = 0;
+	let total = 0;
+	data.map((item, index) => {
+		if (item.name == '其他') {
+			unknown += item.count;
+			//其他数据
+			item.value = item.count;
+		} else {
+			total += item.count;
+			item.value = item.count;
+		}
+		return item;
+	});
+	$('.resume_education-unknown').text(unknown);
+	$('.resume_education-total').text(total);
+	var myechar = echarts.init($('.resume_education')[0]);
+	option = {
+		// 控制提示
+		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: data,
+			//文字调整
+			label: {
+				fontSize: 10
+			},
+			//引导线
+			labelLine: {
+				length: 8,
+				length2: 10
+			}
+		}],
+		color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
+	};
+	myechar.setOption(option);
+}
+
+function pieAge(data) {
+	let recruit_age = data.recruit_age;
+	let gt35 = 0;
+	let lt35 = 0;
+	recruit_age.map((item, index) => {
+		if (item.name == '35到40岁' || item.name == '40岁以上') {
+			gt35 += item.count;
+			//其他数据
+			item.value = item.count;
+		} else {
+			lt35 += item.count;
+			item.value = item.count;
+		}
+		return item;
+	});
+	$('.age-gt35').text(gt35);
+	$('.age-lt35').text(lt35);
+	var myechartAge = echarts.init($('.recruit_age')[0]);
+	option = {
+		// 控制提示
+		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: recruit_age,
+			//文字调整
+			label: {
+				fontSize: 10
+			},
+			//引导线
+			labelLine: {
+				length: 8,
+				length2: 10
+			}
+		}],
+		color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
+	};
+	myechartAge.setOption(option);
+}
+
+function pieEdu(data) {
+	let eduction = data.recruit_education;
+	let unknown = 0;
+	let total = 0;
+	eduction.map((item, index) => {
+		if (item.name == '其他') {
+			unknown += item.count;
+			eduction.splice(index, 1);
+		} else {
+			total += item.count;
+			item.value = item.count;
+		}
+		return item;
+	});
+	$('.edu-unknown').text(unknown);
+	$('.edu-total').text(total);
+	var myechart = echarts.init($('.recruit_education')[0]);
+	option = {
+		// 控制提示
+		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: eduction,
+			//文字调整
+			label: {
+				fontSize: 10
+			},
+			//引导线
+			labelLine: {
+				length: 8,
+				length2: 10
+			}
+		}],
+		color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
+	};
+	myechart.setOption(option);
+}
+
+function geo(data) {
+	let community = data.community;
+	let other = 0;
+	let max = 0; //最大人数
+	community = community.map((item) => {
+		if (item.name == '其他') {
+			other += item.count;
+		} else if (item.count > max) {
+			max = item.count;
+		}
+		return {
+			name: item.name,
+			value: item.count
+		};
+	});
+	community.push({
+		name: '泉州出口加工区',
+		value: 0
+	});
+	community.push({
+		name: '安平开发区',
+		value: 0
+	});
+	var myecharts = echarts.init($('.map .geo')[0])
+
+	// $.get('https://geo.datav.aliyun.com/areas_v3/bound/350582.json', result => {
+	$.get('js/350582.json', result => {
+		// 注册 echarts 地图
+		echarts.registerMap('jinjiang', result);
+		var option = {
+			backgroundColor: '#080a20',
+			title: {
+				text: '其他地区：' + other + ' (人)',
+				// subtext: '其他地区：' + community[community.length - 1].count,
+				left: 'left',
+				textStyle: {
+					color: '#ffffff'
+				}
+			},
+			tooltip: {
+				trigger: 'item',
+				formatter: '{b}<br/>{c} (人)'
+			},
+			visualMap: {
+				min: 0,
+				max: max,
+				text: ['多', '少'],
+				realtime: true,
+				calculable: true,
+				color: '#fff',
+				inRange: {
+					color: ['#142957', '#0b1c2d']
+				},
+				textStyle: {
+					color: '#fff'
+				}
+			},
+			series: [{
+				type: 'map',
+				map: 'jinjiang',
+				zoom: 1.2,
+				roam: true,
+				coordinateSystem: 'geo',
+				// rippleEffect: {
+				//     brushType: 'stroke'
+				// },
+				symbolSize: function(val, params) {
+					return 8;
+				},
+				label: {
+					show: true,
+					color: '#fff'
+				},
+				itemStyle: {
+					normal: {
+						areaColor: '#142957',
+						borderColor: '#0692a4'
+					}
+				},
+				emphasis: {
+					areaColor: '#0b1c2d'
+				},
+				data: community,
+				nameMap: {
+					'晋江市经济开发区': '经济开发区'
+				}
+			}]
+		};
+		myecharts.setOption(option);
+	})
+}
+
+function odd_total(data) {
+	$('.odd_job_number').text(data.user_total);
+	$('.odd_job_company').text(data.company_total);
+	$('.odd_job_job').text(data.comjobs_total);
+}