数据大屏

app/admin/controller/Api.php

@@ -96,7 +96,6 @@ class Api extends BaseController
         $res['user_total']    = UserModel::count();
 
 
-
         return json($res);
     }
 
@@ -120,9 +119,9 @@ class Api extends BaseController
         ];
         $recruit_age        = [
             '30岁及以下' => ['name' => '30岁及以下', 'count' => 0],
-            '30到35岁' => ['name' => '30到35岁', 'count' => 0],
-            '35到40岁' => ['name' => '35到40岁', 'count' => 0],
-            '40岁以上'  => ['name' => '40岁以上', 'count' => 0],
+            '30到35岁'   => ['name' => '30到35岁', 'count' => 0],
+            '35到40岁'   => ['name' => '35到40岁', 'count' => 0],
+            '40岁以上'   => ['name' => '40岁以上', 'count' => 0],
         ];
         $year               = date('Y');
         foreach ($recruit_apply_data as $v) {
@@ -156,4 +155,96 @@ class Api extends BaseController
 
         return json($setting);
     }
+
+    public function bi_talent()
+    {
+        $talent   = SettingModel::getConfigValue(SettingModel::TALENT);
+        $industry = SettingModel::getConfigValue(SettingModel::INDUSTRY);
+
+        $data = [];
+        //人才数据
+        $data['talent_total']         = $talent['talent_total'];
+        $data['talent_problem_total'] = $talent['talent_problem_total'];
+        $data['talent_problem_deal']  = $talent['talent_problem_deal'];
+
+        //产业园机构
+        $data['industry_institution_num']      = $industry['industry_institution_num'];
+        $data['industry_institution_turnover'] = $industry['industry_institution_turnover'];
+        $data['industry_institution_employee'] = $industry['industry_institution_employee'];
+
+        //产业园服务数据
+        $data['industry_enterprise_num'] = $industry['industry_enterprise_num'];
+        $data['industry_service_num']    = $industry['industry_service_num'];
+
+        //人才问题分类
+        $data['talent_problem_cate'] = [
+            ['name' => '人才津贴', 'count' => $talent['talent_problem_talent']],
+            ['name' => '人才认定', 'count' => $talent['talent_problem_determine']],
+            ['name' => '交通补贴', 'count' => $talent['talent_problem_traffic']],
+            ['name' => '购房补贴', 'count' => $talent['talent_problem_house']],
+            ['name' => '人才活动', 'count' => $talent['talent_problem_activity']],
+            ['name' => '子女就学', 'count' => $talent['talent_problem_children']],
+            ['name' => '配偶就业', 'count' => $talent['talent_problem_spouse']],
+            ['name' => '其他问题', 'count' => $talent['talent_problem_other']],
+        ];
+
+        //人才层次
+        $data['talent_level'] = [
+            ['name' => '第一层次', 'count' => $talent['talent_level_1']],
+            ['name' => '第二层次', 'count' => $talent['talent_level_2']],
+            ['name' => '第三层次', 'count' => $talent['talent_level_3']],
+            ['name' => '第四层次', 'count' => $talent['talent_level_4']],
+            ['name' => '第五层次', 'count' => $talent['talent_level_5']],
+            ['name' => '第六层次', 'count' => $talent['talent_level_6']],
+            ['name' => '第七层次', 'count' => $talent['talent_level_7']],
+        ];
+
+        //产业园机构类型
+        $data['industry_institution_type'] = [
+            ['name' => '软件技术', 'count' => $industry['industry_institution_type_software']],
+            ['name' => '管理咨询', 'count' => $industry['industry_institution_type_consult']],
+            ['name' => '培训教育', 'count' => $industry['industry_institution_type_train']],
+            ['name' => '灵活用工', 'count' => $industry['industry_institution_type_flexible']],
+            ['name' => '派遣外包', 'count' => $industry['industry_institution_type_dispatch']],
+            ['name' => '人才猎聘', 'count' => $industry['industry_institution_type_talent']],
+            ['name' => '测评背调', 'count' => $industry['industry_institution_type_evaluation']],
+            ['name' => '劳务输出', 'count' => $industry['industry_institution_type_labor']],
+            ['name' => '商业保险', 'count' => $industry['industry_institution_type_insurance']],
+            ['name' => '其他', 'count' => $industry['industry_institution_type_other']],
+        ];
+
+        //人才分布
+        $data['talent_industry']  = [
+            ['name' => '贸易/进出口', 'count' => $talent['talent_industry_trade']],
+            ['name' => '消费品(食/饮/烟酒)', 'count' => $talent['talent_industry_goods']],
+            ['name' => '服装/纺织/皮革', 'count' => $talent['talent_industry_clothing']],
+            ['name' => '制药/生物工程', 'count' => $talent['talent_industry_drug']],
+            ['name' => '医疗设备/器械', 'count' => $talent['talent_industry_medical']],
+            ['name' => '酒店/旅游', 'count' => $talent['talent_industry_hotel']],
+            ['name' => '交通/运输/物流', 'count' => $talent['talent_industry_traffic']],
+            ['name' => '其他', 'count' => $talent['talent_industry_other']],
+        ];
+        $data['talent_age']       = [
+            ['name' => '30岁以下', 'count' => $talent['talent_age_1']],
+            ['name' => '30-39岁', 'count' => $talent['talent_age_2']],
+            ['name' => '40-49岁', 'count' => $talent['talent_age_3']],
+            ['name' => '50岁以上', 'count' => $talent['talent_age_4']],
+        ];
+        $data['talent_education'] = [
+            ['name' => '硕士', 'count' => $talent['talent_education_1']],
+            ['name' => '博士', 'count' => $talent['talent_education_2']],
+            ['name' => '博士后', 'count' => $talent['talent_education_3']],
+        ];
+
+        //人才咨询渠道
+        $data['talent_channel'] = [
+            ['name' => '来电咨询', 'count' => $talent['talent_channel_call']],
+            ['name' => '微信咨询', 'count' => $talent['talent_channel_wechat']],
+            ['name' => '上门拜访', 'count' => $talent['talent_channel_door']],
+            ['name' => '现场咨询', 'count' => $talent['talent_channel_scene']],
+            ['name' => '其他渠道', 'count' => $talent['talent_channel_other']],
+        ];
+
+        return json($data);
+    }
 }

app/admin/view/home/console.html

@@ -30,7 +30,7 @@
 						</div>
 						<div class="layui-col-xs12 layui-col-sm4">
 							<div class="layuiadmin-card-text">
-								<div class="layui-text-top"><i class="layui-icon layui-icon-template-1"></i><a href="/linggong" target="_blank">人才看板</a></div>
+								<div class="layui-text-top"><i class="layui-icon layui-icon-template-1"></i><a href="/talent" target="_blank">人才看板</a></div>
 								<p class="layui-text-center">高层次人才相关的信息大数据看板。</p>
 								<p class="layui-text-bottom"><span>按F11可全屏观看</span></p>
 							</div>

public/bi/index.html

@@ -11,7 +11,9 @@
     </head>
 
     <body>
+    <div id="countdown" style="position: absolute;left:2rem;top:2rem;border:2px solid #68d8fe;width:2rem;height:2rem;line-height:2rem;color:#68d8fe;border-radius: 50%;text-align: center;font-size:1rem;font-weight: bold;cursor:pointer;">10</div>
         <div class="viewport">
+
             <div class="column">
                 <!-- 企业数 -->
                 <div class="order panel">

public/bi/js/index.js

@@ -439,4 +439,28 @@ 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);
-}
+}
+
+let second = 10;
+let set = null;
+function countdown() {
+	set = setInterval(() => {
+		second--;
+		if (second == 0) {
+			location.href = "/jucai";
+		}
+		$('#countdown').text(second);
+	},1000);
+}
+$(document).ready(() => {
+	countdown();
+});
+
+$('#countdown').click(() => {
+	if (set) {
+		clearInterval(set);
+		set = null;
+	} else {
+		countdown();
+	}
+});

public/jucai/index.html

@@ -11,6 +11,7 @@
     </head>
 
     <body>
+    <div id="countdown" style="position: absolute;left:2rem;top:2rem;border:2px solid #68d8fe;width:2rem;height:2rem;line-height:2rem;color:#68d8fe;border-radius: 50%;text-align: center;font-size:1rem;font-weight: bold;cursor:pointer;">10</div>
         <div class="viewport">
             <div class="column">
                 <div class="order panel">

public/jucai/js/index.js

@@ -405,4 +405,28 @@ function company_count(data) {
 		$(dom).append(rows);
 	});
 
-}
+}
+
+let second = 10;
+let set = null;
+function countdown() {
+	set = setInterval(() => {
+		second--;
+		if (second == 0) {
+			location.href = "/linggong";
+		}
+		$('#countdown').text(second);
+	},1000);
+}
+$(document).ready(() => {
+	countdown();
+});
+
+$('#countdown').click(() => {
+	if (set) {
+		clearInterval(set);
+		set = null;
+	} else {
+		countdown();
+	}
+});

public/linggong/index.html

@@ -11,6 +11,7 @@
     </head>
 
     <body>
+    <div id="countdown" style="position: absolute;left:2rem;top:1.5rem;border:2px solid #68d8fe;width:2rem;height:2rem;line-height:2rem;color:#68d8fe;border-radius: 50%;text-align: center;font-size:1rem;font-weight: bold;cursor:pointer;">10</div>
         <div class="viewport">
             <div class="column">
                 <!--概览-->

public/linggong/js/index.js

@@ -885,4 +885,29 @@ function province(data) {
 		}
 		$('.sup li').eq(index).mouseenter();
 	}, 2000);
-}
+}
+
+
+let second = 10;
+let set = null;
+function countdown() {
+	set = setInterval(() => {
+		second--;
+		if (second == 0) {
+			location.href = "/talent";
+		}
+		$('#countdown').text(second);
+	},1000);
+}
+$(document).ready(() => {
+	countdown();
+});
+
+$('#countdown').click(() => {
+	if (set) {
+		clearInterval(set);
+		set = null;
+	} else {
+		countdown();
+	}
+});

public/talent/css/index.css

@@ -0,0 +1,625 @@
+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{
+  height: 29rem;
+}
+.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:nth-child(1) {
+  width: 12rem;
+}
+.monitor .col:nth-child(2) {
+  width: 8.4rem;
+  /* 不换行  一行省略*/
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.monitor .col:nth-child(3) {
+  width: 3.2rem;
+}
+.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.8rem;
+  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: 1;
+}
+
+.monitor .icon-dot{
+  position: absolute;
+  left: 0.64rem;
+  opacity: 0;
+}
+.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.8rem;
+  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: 1;
+}
+
+.monitor .icon-dot{
+  position: absolute;
+  left: 0.64rem;
+  opacity: 0;
+}
+/* 调用动画 */
+.monitor .marquee {
+  /* //infinite永久调用动画 */
+  animation: row  10s linear infinite;
+}
+/*鼠标划入 停止动画  */
+.monitor .marquee:hover {
+  animation-play-state: paused;
+}
+/* 点位 */
+.point {
+  height: 17.5rem;
+}
+.point .chart {
+  display: flex;
+  margin-top: 1rem;
+  justify-content: space-between;
+}
+.point .pie {
+  width: 13rem;
+  height: 13rem;
+  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: 17.5rem;
+}
+.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: 13.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/talent/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/talent/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/talent/index.html

@@ -0,0 +1,212 @@
+<!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 id="countdown" style="position: absolute;left:2rem;top:2rem;border:2px solid #68d8fe;width:2rem;height:2rem;line-height:2rem;color:#68d8fe;border-radius: 50%;text-align: center;font-size:1rem;font-weight: bold;cursor:pointer;">10</div>
+        <div class="viewport">
+            <div class="column">
+                <div class="sales panel">
+                    <div class="inner">
+                        <div class="caption">
+                            <h3>人才问题分类</h3>
+                        </div>
+                        <div class="chart">
+                            <div class="line talent_problem"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="point panel">
+                    <div class="inner">
+                        <h3>人才咨询渠道</h3>
+                        <div class="chart">
+                            <div class="pie age talent_channel"></div>
+                            <div class="data">
+                                <div class="item">
+                                    <h4 id="talent_channel_total"></h4>
+                                    <span>
+                                    <i class="icon-dot" style="color: #ed3f35"></i>
+                                    总数
+                                </span>
+                                </div>
+                                <div class="item">
+                                    <h4 id="talent_channel_other"></h4>
+                                    <span>
+                                    <i class="icon-dot" style="color: #eacf19"></i>
+                                    其他渠道
+                                </span>
+                                </div>
+                            </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 id="talent_total">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    人才总数
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="talent_problem_total">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    咨询问题数
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="talent_problem_deal">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #9fe6b8;"></i>
+                                    解决问题数
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 人才层次 -->
+                <div class="users  panel">
+                    <div class="inner">
+                        <h3>人才层次</h3>
+                        <div class="chart">
+                            <div class="bar cate talent_level"></div>
+                            <div class="data">
+                                <div class="item">
+                                    <h4 class="talent_level-total">0</h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #ed3f35"></i>
+                                        人才总数
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 人才分布 -->
+                <div class="top panel">
+                    <div class="inner">
+                        <div class="province">
+                            <h3>人才分布</h3>
+                            <div class="data">
+                                <ul class="sup">
+                                    <li data-type="talent_industry">
+                                        <span>行业分布</span>
+                                    </li>
+                                    <li data-type="talent_age">
+                                        <span>年龄分布</span>
+                                    </li>
+                                    <li data-type="talent_education">
+                                        <span>学历分布</span>
+                                    </li>
+                                </ul>
+                                <ul class="sub">
+                                </ul>
+                            </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 id="industry_institution_num">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    机构数量
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="industry_institution_turnover">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    营业额
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="industry_institution_employee">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #9fe6b8;"></i>
+                                    员工数量
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="order panel" style="margin-top: 3rem;">
+                    <div class="inner">
+                        <div class="caption">
+                            <h3>产业园服务数据</h3>
+                        </div>
+                        <div class="data">
+                            <div class="item">
+                                <h4 id="industry_enterprise_num">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    服务企业数
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 id="industry_service_num">0</h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    服务人数
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--点位-->
+                <div class="point panel" style="margin-top: 3rem;">
+                    <div class="inner">
+                        <h3>产业园机构类型</h3>
+                        <div class="chart">
+                            <div class="pie age institution_type"></div>
+                            <div class="data">
+                                <div class="item">
+                                    <h4 id="institution_type_total"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #ed3f35"></i>
+                                        总数
+                                    </span>
+                                </div>
+                                <div class="item">
+                                    <h4 id="institution_type_other"></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/talent/js/index.js

@@ -0,0 +1,485 @@
+//自调用函数
+(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://aggadmin.jucai.gov.cn/admin/api/bi_talent', (res) => {
+	init(res)
+});
+
+function init(data) {
+	$('#industry_enterprise_num').text(data.industry_enterprise_num);
+	$('#industry_institution_employee').text(data.industry_institution_employee);
+	$('#industry_institution_num').text(data.industry_institution_num);
+	$('#industry_institution_turnover').text(data.industry_institution_turnover);
+	$('#industry_service_num').text(data.industry_service_num);
+	$('#talent_problem_deal').text(data.talent_problem_deal);
+	$('#talent_problem_total').text(data.talent_problem_total);
+	$('#talent_total').text(data.talent_total);
+	this.talent_count(data);
+	this.talent_level(data.talent_level);
+	this.talent_problem(data.talent_problem_cate);
+	this.pieTalentChannel(data);
+	this.pieInstitutionType(data);
+}
+
+function talent_count(data) {
+	var htmlArr = [];
+	htmlArr['talent_industry'] = '';
+	htmlArr['talent_age'] = '';
+	htmlArr['talent_education'] = '';
+	data.talent_industry.forEach(function (item) {
+		htmlArr['talent_industry'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
+	});
+	data.talent_age.forEach(function (item) {
+		htmlArr['talent_age'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
+	});
+	data.talent_education.forEach(function (item) {
+		htmlArr['talent_education'] += `<li><span>${item.name}</span><span>${item.count} <s class="icon-up"></s></span></li>`;
+	});
+	$('.inner').on('mouseenter', '.sup li', function () {
+		$(this).addClass('active').siblings().removeClass('active');
+		//渲染
+		$('.sub').html(htmlArr[$(this).attr('data-type')]);
+	});
+	$('.province .sup li').eq(0).mouseenter();
+	var index = 0;
+	var timer = setInterval(() => {
+		index++;
+		if (index > 2) {
+			index = 0;
+		}
+		$('.sup li').eq(index).mouseenter();
+	}, 2000);
+}
+
+function talent_level(data) {
+	let titleArr = [];
+	let countArr = [];
+	let total = 0;
+	let count = data.length;
+	// 中间省略的数据  准备三项
+	var hiddenItem = {
+		name: '',
+		value: 10,
+		// 柱子颜色
+		itemStyle: {
+			color: '#254065'
+		},
+		// 鼠标经过柱子颜色
+		emphasis: {
+			itemStyle: {
+				color: '#254065'
+			}
+		},
+		// 工具提示隐藏
+		tooltip: {
+			extraCssText: 'opacity:0'
+		}
+	};
+	data.forEach((item, index) => {
+		if (index < 7 || index + 7 >= count) {
+			titleArr.push(item.name)
+			countArr.push(item.count)
+		} else if (count > 12 && index == 7) {
+			//随机三个
+			let arr = []
+			for (let i = 7; i < count - 7; i++) {
+				arr.push(i)
+			}
+			let randomArr = [];
+			while (randomArr.length < 3) {
+				let temp = (Math.random() * arr.length) >> 0;
+				randomArr.push(arr.splice(temp, 1)[0]);
+			}
+			randomArr.forEach((randomIndex) => {
+				titleArr.push(data[randomIndex].name)
+				countArr.push(data[randomIndex].count)
+			})
+		}
+		total += (item.count - 0)
+	});
+	$('.talent_level-total').text(total)
+
+	option = {
+		// 工具提示
+		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: titleArr,
+			// 刻度设置
+			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: countArr
+			}
+		]
+	};
+	var myechart = echarts.init($('.talent_level')[0]);
+	myechart.setOption(option);
+}
+
+function talent_problem(data) {
+	let titleArr = [];
+	let countArr = [];
+	let count = data.length;
+	// 中间省略的数据  准备三项
+	var hiddenItem = {
+		name: '',
+		value: 10,
+		// 柱子颜色
+		itemStyle: {
+			color: '#254065'
+		},
+		// 鼠标经过柱子颜色
+		emphasis: {
+			itemStyle: {
+				color: '#254065'
+			}
+		},
+		// 工具提示隐藏
+		tooltip: {
+			extraCssText: 'opacity:0'
+		}
+	};
+	data.forEach((item, index) => {
+		titleArr.push(item.name)
+		countArr.push(item.count)
+	});
+
+	option = {
+		// 工具提示
+		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: titleArr,
+			// 刻度设置
+			axisTick: {
+				// true意思：图形在刻度中间
+				// false意思：图形在刻度之间
+				alignWithLabel: false,
+				show: false
+			},
+			//文字
+			axisLabel: {
+				interval: 0, // 强制显示所有标签
+				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: countArr
+			}
+		]
+	};
+	var myechart = echarts.init($('.talent_problem')[0]);
+	myechart.setOption(option);
+}
+
+function pieTalentChannel(data) {
+	let recruit_age = data.talent_channel;
+	let total = 0;
+	let other = 0;
+	var myechartAge = echarts.init($('.talent_channel')[0]);
+	recruit_age.map((item, index) => {
+		if (item.name == '其他渠道') {
+			other = item.count;
+		} else {
+			total += item.count - 0;
+		}
+		item.value = item.count;
+		return item;
+	});
+	$('#talent_channel_total').text(total);
+	$('#talent_channel_other').text(other);
+	option = {
+		// 控制提示
+		tooltip: {
+			// 非轴图形，使用item的意思是放到数据对应图形上触发提示
+			trigger: 'item',
+			// 格式化提示内容：
+			// a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
+			formatter: "{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 pieInstitutionType(data) {
+	let recruit_age = data.industry_institution_type;
+	let total = 0;
+	let other = 0;
+	var myechartAge = echarts.init($('.institution_type')[0]);
+	recruit_age.map((item, index) => {
+		if (item.name == '其他') {
+			other = item.count;
+		} else {
+			total += item.count - 0;
+		}
+		item.value = item.count;
+		return item;
+	});
+	$('#institution_type_total').text(total);
+	$('#institution_type_other').text(other);
+	option = {
+		// 控制提示
+		tooltip: {
+			// 非轴图形，使用item的意思是放到数据对应图形上触发提示
+			trigger: 'item',
+			// 格式化提示内容：
+			// a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
+			formatter: "{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);
+}
+
+
+let second = 10;
+let set = null;
+function countdown() {
+	set = setInterval(() => {
+		second--;
+		if (second == 0) {
+			location.href = "/bi";
+		}
+		$('#countdown').text(second);
+	},1000);
+}
+$(document).ready(() => {
+	countdown();
+});
+
+$('#countdown').click(() => {
+	if (set) {
+		clearInterval(set);
+		set = null;
+	} else {
+		countdown();
+	}
+});