Vue.use(scroll)
let app = new Vue({
el: "#app",
data() {
return {
title: "内部人才市场双选服务平台",
treeList: [
{
name: "岗位发布",
flag: false,
src: "./images/humanResources/post.png",
style: {
top: "60%",
left: "20%",
backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
},
onStyle: {
top: "60%",
left: "20%",
backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
}
},
{
name: "简历投递",
flag: false,
src: "./images/humanResources/notes.png",
style: {
top: "22%",
left: "28%",
backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
},
onStyle: {
top: "22%",
left: "28%",
backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
}
},
{
name: "资格审查",
flag: true,
src: "./images/humanResources/qualification.png",
style: {
top: "-80px",
left: "calc(50% - 202px)",
backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
},
onStyle: {
top: "-80px",
left: "calc(50% - 202px)",
backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
}
},
{
name: "综合测评",
flag: false,
src: "./images/humanResources/comprehensive.png",
style: {
top: "22%",
right: "28%",
backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
},
onStyle: {
top: "22%",
right: "28%",
backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
}
},
{
name: "资格审查",
flag: false,
src: "./images/humanResources/publicity.png",
style: {
top: "60%",
right: "20%",
backgroundImage: "url(./images/humanResources/icon_bg_blue.png)"
},
onStyle: {
top: "60%",
right: "20%",
backgroundImage: "url(./images/humanResources/iconBg_yellow.png)"
}
},
],
treeIndex: 0,
config1: {
waitTime: 5000,
header: ["招聘单位", "招聘岗位", "招聘人数", "投递人数", "发布时间"],
headerHeight: 55,
columnWidth: [230, 170, 100, 100],
rowNum: 10,
data: [
["西山煤电屯兰矿", '井下普工', '30', '100', "2023.07.01"],
["西山煤电斜沟煤矿", '井下钻探工', '10', '30', "2023.07.01"],
["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
["汾西矿业柳湾煤矿", '井下设备管理员', '10', '50', "2023.07.01"],
["霍州煤电辛置煤矿", '矿井维修电工', '10', '30', "2023.07.01"],
["霍州煤电恒兴煤业", '生产调度员', '4', '10', "2023.07.01"],
["霍州煤电吕梁山煤电公司", '汽车驾驶员', '5', '10', "2023.07.01"],
["山煤国际凌志达煤业", '电工', '5', '16', "2023.07.01"],
["华晋焦煤沙曲一号煤矿", '井下普工', '40', '120', "2023.07.01"],
["山西焦化", '技术员', '2', '12', "2023.07.01"],
["汾西矿业高阳煤矿", '井下安全检查员', '5', '10', "2023.07.01"],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
},
configIndex: 1,
config2: {
waitTime: 2000,
header: ["序号", "单位名称", "招聘岗位数"],
headerHeight: 55,
rowNum: 5,
data: [
["01", "西山煤电", "30个"],
["02", "山煤国际", "25个"],
["03", "汾西矿业", "20个"],
["04", "汾西矿业", "10个"],
["05", "汾西矿业", "8个"],
["06", "汾西矿业", "4个"],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
},
targetIndex: 0,
classChange: false,
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}],
classOption: {
step: 2
},
configMark: {
waitTime: 2000,
header: ["头像", "姓名", "投递岗位", "时间"],
rowNum: 6,
headerHeight: 55,
// columnWidth: [90, 170, 200, ],
data: [
["
", "西山煤电", "71", "3月"],
["", "汾西矿业", "1896", "3月"],
["", "霍州煤电", "847", "3月"],
["", "山煤国际", "514", "3月"],
["", "华晋焦煤", "13", "3月"],
["", "西山煤电", "71", "3月"],
["", "汾西矿业", "1896", "3月"],
["", "霍州煤电", "847", "3月"],
["", "山煤国际", "514", "3月"],
["", "华晋焦煤", "13", "3月"],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
},
configInterview: {
waitTime: 2000,
header: ["序号", "姓名", "会议厅", "场次", "时间"],
headerHeight: 55,
columnWidth: [70, 120, 170, 100],
rowNum: 5,
data: [
["01", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["03", '王亮', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["05", '王伟', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["06", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
},
configWritten: {
waitTime: 2000,
header: ["序号", "姓名", "会议厅", "场次", "时间"],
headerHeight: 55,
columnWidth: [70, 120, 170, 100],
rowNum: 5,
data: [
["01", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["02", '李小曼', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["03", '王亮', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["04", '李鑫', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["05", '王伟', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
["06", '陈英', '第一洽谈室', '第一场', "2023.07.01 09:30-10:30"],
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
},
mainList: [
{
name: "双选场次",
value: 30,
unit: "场",
icon: "../images/humanResources/times.png"
},
{
name: "参与人数",
value: 3000,
unit: "人",
icon: "../images/humanResources/user.png"
}
],
employmentList1: {
waitTime: 5000,
header: ["序号", "姓名", "性别", "身份证号","拟录单位"],
rowNum: 4,
headerHeight: 55,
columnWidth: [100, 100, 100, 280],
data: [
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
hoverPause: false,
},
employmentList2: {
waitTime: 5000,
header: ["序号", "姓名", "性别", "身份证号","拟录单位"],
rowNum: 4,
headerHeight: 55,
columnWidth: [100, 100, 100, 280],
data: [
],
align: ["center", "center", "center", "center", "center"],
headerBGC: "#69c1ff2d",
oddRowBGC: "rgba(105, 193, 255, 0)",
evenRowBGC: "#69c1ff21",
hoverPause: false,
}
}
},
created() {
let employmentList1 = spArr(employmentList, 5)
let arr1 = []
let arr2 = []
employmentList1.forEach((item, index) => {
if (index % 2 == 0) {
arr1.push(...item)
} else {
arr2.push(...item)
}
})
this.employmentList1.data = arr1
this.employmentList2.data = arr2
},
mounted() {
let that = this;
this.$nextTick(() => {
let pageBtm = this.$refs.pageBtm
this.initDownholeEcharts(pageBtm, { x: downhole.x, y: [downhole.y[0], downhole.y[2], downhole.y[3]] })
// let rightOne = this.$refs.rightOne
// this.initLineRight(rightOne)
// let c1 = this.$refs.c1
// this.initRightCycle(c1)
// let c2 = this.$refs.c2
// this.initRightCycle(c2)
// let c3 = this.$refs.c3
// this.initRightCycle(c3)
// let c4 = this.$refs.c4
// this.initRightCycle(c4)
// let c5 = this.$refs.c5
// this.initRightCycle(c5)
setTimeout(() => {
let itemContent = document.getElementById("itemContent")
let target = itemContent.getElementsByClassName("row-item")
let targetList = target.item(0)
targetList.style.background = "#302e2d50"
targetList.style.color = "#E1AF27"
}, 0)
setTimeout(() => {
that.classChange = true
}, 5000);
setInterval(() => {
let that = this
that.treeList.forEach(item => {
item.flag = false
})
if (that.treeIndex > that.treeList.length - 1) {
that.treeIndex = 0
that.treeList[that.treeIndex].flag = true
} else {
that.treeList[that.treeIndex].flag = true
that.treeIndex = that.treeIndex + 1
}
}, 2000)
// setInterval(()=>{
// if(that.configIndex > that.config1.data.length - 1){
// console.log("最后一条");
// that.configIndex = 0
// console.log(that.config1.data[that.configIndex]);
// return
// } else {
// console.log(that.config1.data[that.configIndex]);
// that.configIndex = that.configIndex + 1
// return
// }
// },5000)
})
},
methods: {
initDownholeEcharts(el, data) {
this.downhole = echarts.init(el);
let series = []
let grid = {
top: "15%",
bottom: 50,//也可设置left和right设置距离来控制图表的大小
left: "3%",
right: "1%"
}
data.y.forEach(item => {
series.push()
});
option = {
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
fontSize: 30,
color: '#A3E2F4'
},
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid,
legend: {
data: ["招聘人数", "报名人数", "录用人数"],
align: 'left',
itemGap: 50,
right: '1%',
y: '1%',
icon: 'rect',
textStyle: {
color: "#fff",
fontSize: 30
}
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
interval: 0,
show: true,
fontSize: 30,
textStyle: {
color: "#fff" //X轴文字颜色
},
},
data: data.x,
},
yAxis: {
type: "value",
name: "人",
gridIndex: 0,
// splitNumber: 4,
splitLine: {
show: false,
lineStyle: {
color: '#A3C0DF',
width: 1
},
},
nameTextStyle: {
fontSize: 30,
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#A3C0DF'
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 28,
textStyle: {
color: "#fff" //X轴文字颜色
}
},
},
series: [{
type: 'bar',
name: "招聘人数",
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: '#40A9FF',
},
{
offset: 0,
color: '#082049',
},
]),
},
data: data.y[0],
}, {
type: 'bar',
name: "报名人数",
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: '#EAE179',
},
{
offset: 0,
color: '#082049',
},
]),
},
data: data.y[1],
}, {
type: 'bar',
name: "录用人数",
barWidth: 26,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: '#6A83FF',
},
{
offset: 0,
color: '#082049',
},
]),
},
data: data.y[2],
}]
};
this.downhole.setOption(option);
tools.loopShowTooltip(this.downhole, option, {
nterval: 2000,
loopSeries: true,
});
},
scrollChange(index) {
},
initLineRight(el, data) {
let mychart = echarts.init(el);
var category = [{
name: "管控",
value: 2500
},
{
name: "集中式",
value: 8000
},
{
name: "纳管",
value: 3000
},
{
name: "纳管",
value: 3000
},
{
name: "纳管",
value: 3000
}
]; // 类别
var total = 10000; // 数据总数
var datas = [];
category.forEach(value => {
datas.push(value.value);
});
option = {
xAxis: {
max: total,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
},
grid: {
left: 10,
top: 20, // 设置条形图的边距
right: 100,
bottom: 20
},
yAxis: [{
type: "category",
inverse: false,
data: category,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}],
series: [{
// 内
type: "bar",
barWidth: 18,
legendHoverLink: false,
silent: true,
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 1,
color: '#00feff'
},
{
offset: 0.5,
color: '#027eff'
},
{
offset: 0,
color: '#0286ff'
}
]
}
}
},
label: {
normal: {
show: true,
position: [0, -35],
formatter: "{b}",
textStyle: {
color: "#fff",
fontSize: 30,
fontWeight: "bolder",
}
}
},
data: category,
z: 1,
animationEasing: "elasticOut"
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#061348"
}
},
symbolRepeat: "fixed",
symbolMargin: 12,
symbol: "rect",
symbolClip: true,
symbolSize: [5, 21],
symbolPosition: "start",
symbolOffset: [1, -1],
symbolBoundingData: this.total,
data: category,
z: 2,
animationEasing: "elasticOut"
},
{
// 外边框
type: "pictorialBar",
symbol: "rect",
symbolBoundingData: total,
itemStyle: {
normal: {
color: "none"
}
},
label: {
normal: {
color: "#fff",
fontSize: 30,
position: [600, 20],
distance: 0, // 向右偏移位置
show: true
}
},
data: datas,
z: 0,
animationEasing: "elasticOut"
},
{
name: "外框",
type: "bar",
barGap: "-150%", // 设置外框粗细
data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
barWidth: 35,
itemStyle: {
normal: {
color: "transparent", // 填充色
barBorderColor: "#1C4B8E", // 边框色
barBorderWidth: 1, // 边框宽度
// barBorderRadius: 0, //圆角半径
label: {
// 标签显示位置
show: false,
position: "top" // insideTop 或者横向的 insideLeft
}
}
},
z: 0
}
]
};
mychart.setOption(option)
},
initRightCycle(el, data) {
var getvalue = [88];
let chat = echarts.init(el)
option = {
// title: {
// text: getvalue + '分',
// textStyle: {
// color: '#28BCFE',
// fontSize: 40
// },
// subtext: '综合得分',
// subtextStyle: {
// color: '#666666',
// fontSize: 30
// },
// itemGap: 20,
// left: 'center',
// top: '43%'
// },
tooltip: {
formatter: function (params) {
return '综合得分：' + getvalue + '分';
}
},
angleAxis: {
max: 100,
clockwise: true, // 逆时针
// 隐藏刻度线
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
polar: {
center: ['50%', '50%'],
radius: ['60%', '75%'],
// radius: '100%' //图形大小
},
series: [{
type: 'bar',
data: getvalue,
showBackground: true,
backgroundStyle: {
color: '#BDEBFF',
},
coordinateSystem: 'polar',
roundCap: true,
barWidth: 30,
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#25BFFF'
}, {
offset: 1,
color: '#5284DE'
}]),
shadowBlur: 5,
shadowColor: '#2A95F9',
}
},
}]
};
chat.setOption(option)
},
},
})