feat: modify bi

public/bi/css/index.css

@@ -79,7 +79,7 @@ a{
 }
 /* 监控 */
 .monitor{
-	height: 35rem;
+	height: 27rem;
   }
   .monitor .inner{
 	padding: 1rem 0;
@@ -97,7 +97,7 @@ a{
   }
   
   .monitor .tabs a:first-child{
-	/* border-right: 0.083rem solid #00f2f1; */
+	border-right: 0.083rem solid #00f2f1;
 	padding-left: 0;
   }
   
@@ -209,7 +209,7 @@ a{
 }
 /* 点位 */
 .point {
-  height: 15rem;
+  height: 14rem;
 }
 .point .chart {
   display: flex;

public/bi/index.html

@@ -50,8 +50,8 @@
                 <div class="monitor panel">
                     <div class="inner">
                         <div class="tabs">
-                            <a href="javascript:;" data-index="0" class="active">岗位信息</a>
+                            <a href="javascript:;" data-index="0" class="active">最热岗位</a>
-                            <!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
+                            <a href="javascript:;" data-index="1">最新岗位</a>
                         </div>
                         <div class="content" style="display: block;">
                             <div class="head">
@@ -60,7 +60,44 @@
                                 <span class="col">工资</span>
                             </div>
                             <div class="marquee-view">
-                                <div class="marquee">
+                                <div class="marquee hot">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="content">
+                            <div class="head">
+                                <span class="col">岗位名</span>
+                                <span class="col">公司名</span>
+                                <span class="col">工资</span>
+                            </div>
+                            <div class="marquee-view">
+                                <div class="marquee new">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 用户 -->
+                <div class="users panel">
+                    <div class="inner">
+                        <h3>岗位类型</h3>
+                        <div class="chart">
+                            <div class="bar type"></div>
+                            <div class="data" style="padding: 1.5rem 0.5rem">
+                                <!-- <div class="item">
+                                    <h4 class="type-count"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #ed3f35"></i>
+                                        类型总数
+                                    </span>
+                                </div> -->
+                                <div class="item">
+                                    <h4 class="type-total"></h4>
+                                    <span>
+                                        <i class="icon-dot" style="color: #eacf19"></i>
+                                        岗位总数
+                                    </span>
                                 </div>
                             </div>
                         </div>
@@ -69,6 +106,28 @@
                 
             </div>
             <div class="column">
+                <!-- 培训课程 -->
+                <div class="order panel">
+                    <div class="inner">
+                        <!-- 数据 -->
+                        <div class="data">
+                            <div class="item">
+                                <h4 class="train"></h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    培训课程
+                                </span>
+                            </div>
+                            <div class="item">
+                                <h4 class="train_join"></h4>
+                                <span>
+                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    培训意向人数
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <!-- 地图 -->
                 <div class="map">
                     <h3>
@@ -82,15 +141,15 @@
                 <!-- 用户 -->
                 <div class="users panel">
                     <div class="inner">
-                        <h3>岗位类型</h3>
+                        <h3>岗位类别</h3>
                         <div class="chart">
-                            <div class="bar"></div>
+                            <div class="bar cate"></div>
                             <div class="data">
                                 <div class="item">
                                     <h4 class="cate-count"></h4>
                                     <span>
                                         <i class="icon-dot" style="color: #ed3f35"></i>
-                                        类型总数
+                                        类别总数
                                     </span>
                                 </div>
                                 <div class="item">
@@ -140,24 +199,28 @@
                         </div>
                     </div>
                 </div>
-                <!-- 培训课程 -->
+               
-                <div class="order panel">
+                <!--点位-->
+                <div class="point panel">
                     <div class="inner">
-                        <!-- 数据 -->
+                        <h3>年龄分布统计</h3>
-                        <div class="data">
+                        <div class="chart">
-                            <div class="item">
+                            <div class="pie age"></div>
-                                <h4 class="train"></h4>
+                            <div class="data">
-                                <span>
+                                <div class="item">
-                                    <i class="icon-dot" style="color: #ed3f35;"></i>
+                                    <h4 class="age-unknown"></h4>
-                                    培训课程
+                                    <span>
-                                </span>
+                                        <i class="icon-dot" style="color: #ed3f35"></i>
-                            </div>
+                                        其他年龄
-                            <div class="item">
+                                    </span>
-                                <h4 class="train_join"></h4>
+                                </div>
-                                <span>
+                                <div class="item">
-                                    <i class="icon-dot" style="color: #eacf19;"></i>
+                                    <h4 class="age-total"></h4>
-                                    培训意向人数
+                                    <span>
-                                </span>
+                                        <i class="icon-dot" style="color: #eacf19"></i>
+                                        年龄统计
+                                    </span>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -167,7 +230,7 @@
                     <div class="inner">
                         <h3>学历分布统计</h3>
                         <div class="chart">
-                            <div class="pie"></div>
+                            <div class="pie edu"></div>
                             <div class="data">
                                 <div class="item">
                                     <h4 class="edu-unknown"></h4>

public/bi/js/index.js

@@ -37,7 +37,9 @@ function init(data) {
 	$('.train_join').text(data.train_join);
 	this.geo(data);
 	this.monitor(data);
+	this.pieAge(data);
 	this.pie(data);
+	this.userType(data);
 	this.user(data);
 	this.order(data);
 	this.sale(data);
@@ -139,18 +141,29 @@ function geo(data) {
 
 function monitor(data) {
 	//事件委托
-	// $('.monitor').on('click', ' a', function () {
+	$('.monitor').on('click', ' a', function () {
-	//     //点击当前的a 加类名 active  他的兄弟删除类名
+	    //点击当前的a 加类名 active  他的兄弟删除类名
-	//     $(this).addClass('active').siblings().removeClass('active');
+	    $(this).addClass('active').siblings().removeClass('active');
-	//     //获取一一对应的下标 
+	    //获取一一对应的下标 
-	//     var index = $(this).index();
+	    var index = $(this).index();
-	//     //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
+	    //选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
-	//     $('.content').eq(index).show().siblings('.content').hide();
+	    $('.content').eq(index).show().siblings('.content').hide();
-	// });
+	});
 	//填充数据
 	let comjobs = data.comjobs;
 	var html = '';
-	comjobs.forEach(function(item) {
+	comjobs.hot.forEach(function(item) {
+		html += `<div class="row">`;
+		html += `<span class="col">${item.title}</span>`;
+		html += `<span class="col">${item.worker.ftitle}</span>`;
+		html += `<span class="col">${item.bwagall || '面谈'}</span>`;
+		html += `<span class="icon-dot"></span>`;
+		html += `</div>`;
+	});
+	//渲染
+	$('.monitor .marquee.hot').html(html);
+    html = '';
+	comjobs.new.forEach(function(item) {
 		html += `<div class="row">`;
 		html += `<span class="col">${item.title}</span>`;
 		html += `<span class="col">${item.company}</span>`;
@@ -159,7 +172,7 @@ function monitor(data) {
 		html += `</div>`;
 	});
 	//渲染
-	$('.monitor .marquee').html(html);
+	$('.monitor .marquee.new').html(html);
 	//滚动
 	//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
 	//      然后动画向上滚动，滚动到一半重新开始滚动
@@ -173,6 +186,62 @@ function monitor(data) {
 
 }
 
+function pieAge(data) {
+	let eduction = data.user_age;
+	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;
+	});
+    console.log(eduction)
+	$('.age-unknown').text(unknown);
+	$('.age-total').text(total);
+	var myechartAge = echarts.init($('.pie.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: eduction,
+			//文字调整
+			label: {
+				fontSize: 10
+			},
+			//引导线
+			labelLine: {
+				length: 8,
+				length2: 10
+			}
+		}],
+		color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
+	};
+	myechartAge.setOption(option);
+}
 function pie(data) {
 	let eduction = data.eduction;
 	let unknown = 0;
@@ -189,7 +258,7 @@ function pie(data) {
 	});
 	$('.edu-unknown').text(unknown);
 	$('.edu-total').text(total);
-	var myechart = echarts.init($('.pie')[0]);
+	var myechart = echarts.init($('.pie.edu')[0]);
 	option = {
 		// 控制提示
 		tooltip: {
@@ -228,6 +297,164 @@ function pie(data) {
 	};
 	myechart.setOption(option);
 }
+// 用户
+function userType(data) {
+	let cate = data.type;
+	let titleArr = [];
+	let countArr = [];
+	let total = 0;
+	let count = cate.length;
+	// 中间省略的数据  准备三项
+	var hiddenItem = {
+		name: '',
+		value: 10,
+		// 柱子颜色
+		itemStyle: {
+			color: '#254065'
+		},
+		// 鼠标经过柱子颜色
+		emphasis: {
+			itemStyle: {
+				color: '#254065'
+			}
+		},
+		// 工具提示隐藏
+		tooltip: {
+			extraCssText: 'opacity:0'
+		}
+	};
+    let titleAttr = {
+            1: '按月',
+            2: '按时',
+            3: '按件',
+            4: '按项目',
+            5: '其他',
+    }
+	cate.forEach((item, index) => {
+		if (index < 5 || index + 5 >= count) {
+			titleArr.push(titleAttr[item.wtype])
+			countArr.push(item.count)
+		} else if (count > 10 && index == 5) {
+			//随机三个
+			let arr = []
+			for (let i = 5; i < count - 5; 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(titleAttr[cate[randomIndex].wtype])
+				countArr.push(cate[randomIndex].count)
+			})
+		}
+		total += item.count
+	});
+	$('.type-count').text(count)
+	$('.type-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($('.users .bar.type')[0]);
+	myechart.setOption(option);
+}
+
 // 用户
 function user(data) {
 	let cate = data.cate;
@@ -375,7 +602,7 @@ function user(data) {
 			}
 		]
 	};
-	var myechart = echarts.init($('.users .bar')[0]);
+	var myechart = echarts.init($('.users .bar.cate')[0]);
 	myechart.setOption(option);
 }