agg_admin/public/jucai/js/index.js

//自调用函数
(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://www.jucai.gov.cn/api/config/bi/company', (res) => {
	company_init(res)
});

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 company_init(data) {
	this.company_total(data);
	this.company_count(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 company_total(data) {
	$('.company_number').text(data.total_count[0].count);
	$('.jobs_number').text(data.total_count[1].count);
}

function company_count(data) {
	//事件委托
	$('.monitor').on('click', ' a', function () {
		//点击当前的a 加类名 active  他的兄弟删除类名
		$(this).addClass('active').siblings().removeClass('active');
		//获取一一对应的下标
		var index = $(this).index();
		//选取content 然后狗日对应下标的 显示   当前的兄弟.content隐藏
		$('.content').eq(index).show().siblings('.content').hide();
	});
	var index = 0;
	var monitortimer = setInterval(() => {
		index++;
		if (index > 1) {
			index = 0;
		}
		$('.monitor a').eq(index).click();
	}, 5000);
	//填充数据
	var company_trade = data.company_trade;
	var job_category = data.job_category;
	var html = '';
	company_trade.forEach(function(item) {
		html += `<div class="row">`;
		html += `<span class="col">${item.name}</span>`;
		html += `<span class="col">${item.count}</span>`;
		html += `<span class="icon-dot"></span>`;
		html += `</div>`;
	});
	//渲染
	$('.company_trade').html(html);
	html = '';
	job_category.forEach(function(item) {
		html += `<div class="row">`;
		html += `<span class="col">${item.name}</span>`;
		html += `<span class="col">${item.count}</span>`;
		html += `<span class="icon-dot"></span>`;
		html += `</div>`;
	});
	//渲染
	$('.job_category').html(html);
	//滚动
	//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
	//      然后动画向上滚动，滚动到一半重新开始滚动
	//因为选取的是两个marquee  所以要遍历
	$('.monitor .marquee').each(function (index, dom) {
		//将每个 的所有子级都复制一遍
		var rows = $(dom).children().clone();
		//再将新的到的加入原来的
		$(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();
	}
});