Vue.use(scroll) let app = new Vue({ el: "#app", data() { return { title: "人才中心双选服务平台", treeList: [{ name: "岗位发布", flag: true, src: "./images/humanResources/post.png", onSrc: "./images/humanResources/post_on.png", style: { top: "65%", left: "13%", backgroundImage: "url(./images/humanResources/icon_bg_blue.png)" }, onStyle: { top: "65%", left: "13%", backgroundImage: "url(./images/humanResources/iconBg_yellow.png)" } }, { name: "自主报名", flag: false, src: "./images/humanResources/notes.png", onSrc: "./images/humanResources/notes_on.png", style: { top: "30%", left: "22%", backgroundImage: "url(./images/humanResources/icon_bg_blue.png)" }, onStyle: { top: "30%", left: "22%", backgroundImage: "url(./images/humanResources/iconBg_yellow.png)" } }, { name: "资格审查", flag: false, src: "./images/humanResources/qualification.png", onSrc: "./images/humanResources/qualification_on.png", style: { top: "125px", left: "calc(50% - 202px)", backgroundImage: "url(./images/humanResources/icon_bg_blue.png)" }, onStyle: { top: "125px", left: "calc(50% - 202px)", backgroundImage: "url(./images/humanResources/iconBg_yellow.png)" } }, { name: "综合测评", flag: false, src: "./images/humanResources/comprehensive.png", onSrc: "./images/humanResources/comprehensive_on.png", style: { top: "30%", right: "22%", backgroundImage: "url(./images/humanResources/icon_bg_blue.png)" }, onStyle: { top: "30%", right: "22%", backgroundImage: "url(./images/humanResources/iconBg_yellow.png)" } }, { name: "录用公示", flag: false, src: "./images/humanResources/publicity.png", onSrc: "./images/humanResources/publicity_on.png", style: { top: "65%", right: "13%", backgroundImage: "url(./images/humanResources/icon_bg_blue.png)" }, onStyle: { top: "65%", right: "13%", backgroundImage: "url(./images/humanResources/iconBg_yellow.png)" } }, ], treeIndex: 0, rollFlag: true, config1: { waitTime: 7000, header: ["双选单位", "双选岗位", "双选人数", "报名人数", "发布时间"], headerHeight: 55, columnWidth: [230, 170], rowNum: 10, data: [ ["西山煤电屯兰矿", '井下普工', '50', '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", hoverPause: false, }, configIndex: 1, config2: { waitTime: 2000, header: ["序号", "单位名称", "双选岗位数"], headerHeight: 55, rowNum: 5, data: [ // ["01", "西山煤电", "30个"], // ["02", "山煤国际", "25个"], // ["03", "汾西矿业", "20个"], // ["04", "汾西矿业", "10个"], // ["05", "汾西矿业", "8个"], // ["01", "西山煤电", "30个"], // ["02", "山煤国际", "25个"], // ["03", "汾西矿业", "20个"], // ["06", "汾西矿业", "4个"], // ["07", "山煤国际", "4个"], ], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", carousel: 'page' }, 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: 9 }, configMark: { waitTime: 2000, header: ["头像", "姓名", "报名岗位", "时间"], rowNum: 6, headerHeight: 55, columnWidth: [120], data: [ ["", "程嘉鑫", "技术员", "2023.07.29"], ["", "池富婕", "生产调度员", "2023.07.26"], ["", "邓文奇", "井下钻探工", "2023.07.18"], ["", "翟世佳", "井下钻探工", "2023.07.11"], ["", "丁一帆", "生产调度员", "2023.07.08"], ["", "董明霞", "生产调度员", "2023.07.01"], ["", "杜沛宣", "技术员", "2023.06.29"], ["", "樊宇浩", "技术员", "2023.07.29"], ["", "冯凯", "井下钻探工", "2023.07.26"], ["", "耿越", "生产调度员", "2023.07.18"], ], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", }, configInterview: { waitTime: 2000, header: ["序号", "姓名", "地点", "双选单位", "时间"], headerHeight: 55, columnWidth: [90, 120, 170, 200], rowNum: 6, data: [ ], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", hoverPause: false, }, configInterviewElse: { waitTime: 2000, header: ["序号", "姓名", "地点", "双选单位", "时间"], headerHeight: 55, columnWidth: [240, 320, 370, 460, 480], rowNum: 25, data: [], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", }, configWritten: { waitTime: 2000, hoverPause: false, header: ["序号", "姓名", "地点", "双选单位", "时间"], headerHeight: 55, columnWidth: [90, 120, 170, 200], rowNum: 6, data: [ ], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", }, mainList: [{ name: "双选场次", value: 0, unit: "场", icon: "./images/humanResources/times.png" }, { name: "参与人数", value: 0, unit: "人", icon: "./images/humanResources/user.png" } ], employmentList1: { waitTime: 2000, header: ["序号", "姓名", "性别", "身份证号", "拟录用单位"], rowNum: 5, headerHeight: 55, columnWidth: [100, 140, 100, 280], data: [], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", hoverPause: false, }, employmentList2: { waitTime: 2000, header: ["序号", "姓名", "性别", "身份证号", "拟录用单位"], rowNum: 5, headerHeight: 55, columnWidth: [100, 140, 100, 280], data: [], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", hoverPause: false, }, employmentList3: { waitTime: 2000, header: ["序号", "姓名", "性别", "身份证号", "拟录用单位"], rowNum: 5, headerHeight: 55, columnWidth: [100, 140, 100, 280], data: [], align: ["center", "center", "center", "center", "center"], headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", hoverPause: false, }, typeList: { waitTime: 2000, header: ["单位名称", "岗位名称", "报名人数"], rowNum: 6, headerHeight: 55, columnWidth: [100, 200, 400,], data: [ ["汾西矿业", "综合管理岗", "40"], ["西山煤电", "综合管理岗", "35"], ["西山煤电", "财务管理岗", "30"], ["汾西矿业", "综合管理岗", "25"], ["西山煤电", "综合管理岗", "20"], ["西山煤电", "财务管理岗", "15"], ["汾西矿业", "综合管理岗", "10"], ], align: ["center", "center", "center", "center", "center"], index: true, headerBGC: "#69c1ff2d", oddRowBGC: "rgba(105, 193, 255, 0)", evenRowBGC: "#69c1ff21", hoverPause: false, }, vitaEcharts: null, newList: [], allTimeList: [], showMark: false, showSelect: false, showMonth: false, monthList, monthItem: "08", timeList1: ["2022-08", "2023-08"], timeList2: ["2022-08", "2023-08"], from: "", type: 0, echartsIndex: 1, downholeFlag: true, markStyle: { bottom: "4%", right: "5%" }, rightList: [{ name: "当前数", flag: true, num1: 0, num2: 0, num3: "0%", }, { name: "累计数", flag: false, num1: 0, num2: 0, num3: "0%", }], rightIndex: 0, leftList: [{ name: "双选岗位", flag: true }, { name: "双选岗位类别", flag: false }], leftIndex: 0, roseEcharts: null, leftFlag: true, rollTitle: "西山煤电屯兰矿井下普工工双选公告", leftTime: null, rightTime: null, recruitInfoList: [], recruitInfoIndex: 0, vitaData: { x: ['4月', '5月', '6月', '7月', '8月', '9月'], y: [56, 32, 64, 81, 43, 13] }, isChangeList: false, imageList: ["./images/humanResources/ppt1.jpg", "", ""], imageIndex: 0, imageFlag: false, pageFlag: true, hecharts: null, leftErrorList: [], // leftErrorList: ["信息不完整", "信息有误", "任职条件不符", "出勤不足", "工作年限不符"], isShowList: true, isListEnd: 0, // address: "西山煤电屯兰矿。", interviewIndex: 0, examinationIndex: 0, showInterview: true, // 面试 showExamination: true, //笔试 noticeList: [], noticeIndex: 0, isShowInfoList: false, recruitTypeMax: 0, recruitTypeList: [], showBigList: true, rightData: [], noticIndex: 0, noticList: [], noticTime: null, configDataIndex: 1, itemClass: "item_content_6_false", dataFlag: true, lineRight1: null, lineRight2: null, lineRight3: null, lineRight4: null, lineRight5: null, listChange: null, mianshiTime: null, bishiTime: null, noteListIndex: 0, mianBiTime: null, } }, beforeCreate() { // 跳转地址 let AddUrl = location.protocol + "//" + location.host + "/ierp" if (!window.location.search) { // alert("链接已失效，请重新打开") window.location.href = AddUrl } let arr = window.location.search.split("&") let dataList = [] arr.forEach(item => { dataList.push(item.split("=")[1]) }) window.user = dataList[0] let newDate = new Date().getTime() let authorityType = window.sessionStorage.getItem("authorityType") || false // console.log(newDate); // console.log(parseInt(dataList[1])); // console.log(parseInt(dataList[1]) + 30000 >= newDate); // return var diff = Math.abs(newDate - parseInt(dataList[1])); // 获取两个时间戳的差值（以毫秒为单位） var diffInSeconds = Math.floor(diff / 1000); // 将差值转换为秒数 let effective = diffInSeconds <= 30; // 判断差值是否在30秒以内 console.log(diff); console.log(diffInSeconds); console.log(effective); if (!authorityType) { if (!effective) { console.log("链接已失效，请重新打开"); window.location.href = AddUrl } else { console.log("链接未失效") window.sessionStorage.setItem("authorityType", true) } } }, beforeDestroy() { window.sessionStorage.removeItem("authorityType") }, created() { let date = new Date() let year = date.getFullYear() let month = date.getMonth() + 1 if (month < 10) { month = "0" + month this.timeList1 = [year + "-" + month, year + "-" + (month)] this.timeList2 = [year + "-" + month, year + "-" + (month)] } else { this.timeList1 = [year + "-" + (month), year + "-" + (month)] this.timeList2 = [year + "-" + (month), year + "-" + (month)] } this.newList = listToChange(yearList, monthList) this.employmentList3.data = employmentList if (employmentList.length % 2 != 0) { employmentList.push([]) } employmentList.forEach((item, index) => { if (index % 2 == 0) { this.employmentList1.data.push(item) } else { this.employmentList2.data.push(item) } }) this.keyDown() }, watch: { imageIndex() { let that = this if (this.imageIndex == this.imageList.length) { that.downhole.dispose() that.vitaEcharts.dispose() setTimeout(() => { let pageBtm = that.$refs.pageBtm that.initDownholeEcharts(pageBtm, { x: admissionList.x, y1: admissionList.y1, y2: admissionList.y2, y3: admissionList.y3 }) let vita = that.$refs.vita that.initVitaEcharts(vita) }) this.imageIndex = 0 this.imageFlag = false } }, }, mounted() { let that = this; this.$nextTick(() => { setInterval(() => { let that = this that.treeList.forEach(item => { item.flag = false }) if (that.treeIndex >= that.treeList.length - 1) { that.treeIndex = 0 } else { that.treeIndex = that.treeIndex + 1 } that.treeList[that.treeIndex].flag = true }, 5000) localEnvAppToken().then(res => { localStorage.setItem("app_token", res.app_token) getLocalEnvAccessToken().then(res => { localStorage.setItem("access_token", res.access_token) that.getPlayers() that.getPostDetail() that.getHalfYearDelivcv() that.getHotDelivcv() that.arrToListArr() that.getDelivcvAndApply() that.getRecruitType() that.getFailReason() that.getQualAudits() that.getNoticePerson() that.getNotice() that.getDoubleChoice() that.getPositionAll() that.getTotalRate() }) }).catch(err => { this.isChangeList = true this.isShowInfoList = true let pageBtm = this.$refs.pageBtm this.initDownholeEcharts(pageBtm, { x: admissionList.x, y1: admissionList.y1, y2: admissionList.y2, y3: admissionList.y3 }) let vita = this.$refs.vita that.initVitaEcharts(vita) setTimeout(() => { let itemContent = document.getElementById("itemContent") if (itemContent) { let target = itemContent.getElementsByClassName("row-item") let targetList = target.item(0) targetList.style.background = "#302e2d50" targetList.style.color = "#E1AF27" } }, 10) }) }) this.leftTime = setInterval(() => { that.leftList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } } }) }, 15000) this.rightTime = setInterval(() => { that.rightList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { that.rightIndex = index } }) }, 5000) }, methods: { handleClickIcon(item, index) { let that = this; if (index == 1) { that.mianBiTime && clearInterval(that.mianBiTime) if (that.showBigList) { that.configInterview.rowNum = 20 that.configWritten.rowNum = 20 that.employmentList3.rowNum = 20 that.configInterview.columnWidth = [] that.configInterview.columnWidth = [240, 320, 370, 460, 480] that.configWritten.columnWidth = [] that.configWritten.columnWidth = [240, 320, 370, 460, 480] that.employmentList3.columnWidth = [] that.employmentList3.columnWidth = [240, 320, 370, 460, 480] that.leftTime && clearInterval(that.leftTime) that.rightTime && clearInterval(that.rightTime) if (that.roseEcharts) { that.roseEcharts.dispose() } if (that.configInterviewElse.data.length <= that.configInterviewElse.rowNum) { that.mianBiTime = setInterval(() => { that.getNoticePerson() }, 1000 * 60 * 5) } setTimeout(() => { that.showBigList = false }, 10) } else { that.configInterview.rowNum = 6 that.configWritten.rowNum = 6 that.configInterview.columnWidth = [90, 120, 170, 200] that.configWritten.columnWidth = [90, 120, 170, 200] that.leftFlag = true that.leftList = [{ name: "双选岗位", flag: true }, { name: "双选岗位类别", flag: false }] setTimeout(() => { that.showBigList = true that.leftTime = setInterval(() => { that.leftList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } } }) }, 15000) }, 10) } setTimeout(() => { if (that.showBigList) { let total = 0 that.rightData.forEach(item => { total = total + item.value }) return new Promise(() => { that.getFailReason() that.getHalfYearDelivcv() }) } }, 15) } else { that.dataFlag = !that.dataFlag that.leftTime && clearInterval(that.leftTime) that.leftTime = setInterval(() => { that.leftList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } } }) }, 15000) that.rightTime && clearInterval(that.rightTime) that.rightTime = setInterval(() => { that.rightList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { that.rightIndex = index } }) }, 5000) that.getPlayers() that.getPostDetail() that.getHalfYearDelivcv() that.getHotDelivcv() that.arrToListArr() that.getDelivcvAndApply() that.getRecruitType() that.getFailReason() that.getQualAudits() that.getNoticePerson() that.getNotice() that.getDoubleChoice() that.getPositionAll() that.getTotalRate() } }, // 监听键盘 keyDown() { let that = this; document.onkeydown = (e) => { //事件对象兼容 if (this.imageFlag) { let e1 = e || event || window.event || arguments.callee.caller.arguments[0] //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40 if (e1 && e1.keyCode == 37) { if (that.imageIndex != 0) { that.imageIndex = that.imageIndex - 1 } } else if (e1 && e1.keyCode == 38) { // that.imageIndex = that.imageIndex - 1 if (that.imageIndex != 0) { that.imageIndex = that.imageIndex - 1 } } else if (e1 && e1.keyCode == 33) { // that.imageIndex = that.imageIndex - 1 if (that.imageIndex != 0) { that.imageIndex = that.imageIndex - 1 } } else if (e1 && e1.keyCode == 39) { that.imageIndex = that.imageIndex + 1 } else if (e1 && e1.keyCode == 40) { that.imageIndex = that.imageIndex + 1 } else if (e1 && e1.keyCode == 34) { that.imageIndex = that.imageIndex + 1 } } } }, handleChangeImage() { this.imageIndex += 1 }, fullScreen() { let docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } this.imageFlag = true this.pageFlag = false }, initDownholeEcharts(el, data) { if (this.downhole) { this.downhole.dispose() } this.downhole = echarts.init(el); let series = [] let grid = { top: "15%", bottom: 50, //也可设置left和right设置距离来控制图表的大小 left: "3%", right: "1%" } option = { tooltip: { backgroundColor: 'rgba(0, 0, 0, 0.3)', borderColor: "rgba(0,0,0,0.5)", show: true, trigger: 'axis', textStyle: { fontSize: 30, color: '#A3E2F4' }, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid, legend: { data: ["需求人数", "报名人数", "录用人数"], align: 'left', itemGap: 50, right: 500, y: '2%', 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.y1, }, { 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.y2, }, { 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.y3, }] }; this.downhole.setOption(option); tools.loopShowTooltip(this.downhole, option, { nterval: 2000, loopSeries: true, }); }, scrollChange(index) { let that = this; this.itemClass = "item_content_6", this.rollFlag = false; if (that.noteListIndex >= this.config1.data.length - 1) { that.noteListIndex = 0 this.recruitInfoIndex = 0 } else { that.noteListIndex += 1 that.recruitInfoIndex += 1 } // this.address = this.config1.data[listIndex][0] + "。" if (this.config1.data[that.noteListIndex][0] && this.config1.data[that.noteListIndex][1]) { this.rollTitle = this.config1.data[that.noteListIndex][0] + this.config1.data[that.noteListIndex][1] + "双选公告" } setTimeout(() => { this.rollFlag = true }) }, initRightCycle(el, data) { var getvalue = [data]; let chat = echarts.init(el) option = { title: { text: getvalue + '%', textStyle: { color: '#fff', fontSize: 20 }, itemGap: 20, left: '55%', top: '38%' }, // 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: ['70%', '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) }, initLineRight(el, data, type) { let that = this; // if(myChart){ // myChart.dispose() // } let myChart if (type) { if (that[type]) { that[type].dispose() } that[type] = echarts.init(el); } else { myChart = echarts.init(el); } let nameList = ["a"]; let valueList = [data.value]; let total = data.total; // 数据总数 var category = nameList.map((item, index) => { return { value: valueList[index], itemStyle: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 1, [{ offset: 0, color: "#40A9FF50", }, { offset: 1, color: "#40A9FF", }, ], false ), }, }; }); var totalList = []; var totalBorderList = []; nameList.map((item, index) => { totalList.push({ value: total, itemStyle: { color: "rgba(51, 147, 236, 0.29)", }, }); totalBorderList.push({ value: total, itemStyle: { borderColor: "rgba(51, 147, 236, 0.29)", color: "transparent", }, }); }); var datas = []; category.forEach((value) => { datas.push(value.value); }); if (total == 0) { total += 1 } option = { // backgroundColor: 'rgb(231,238,249)', xAxis: { max: total, splitLine: { show: false, }, axisLine: { show: false, }, axisLabel: { show: false, }, axisTick: { show: false, }, }, grid: { left: "1%", top: 20, // 设置条形图的边距 right: "40%", bottom: 20, }, yAxis: [{ type: "category", inverse: false, data: nameList, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false, }, },], series: [{ // 内 type: "bar", barWidth: 16, barGap: "20%", silent: true, // label: { // normal: { // formatter: (item) => { // return `${item['name']}：${item['value']} `; // }, // textStyle: { // color: 'rgba(105, 120, 136, 1)', // fontSize: 14, // }, // position: [0, '-25px'], // show: true, // }, // }, data: category, z: 1, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 1, 0, 0, 1, [{ offset: 0, color: "rgba(81, 193, 156, 1)", }, { offset: 1, color: "rgba(234, 177, 100, 1)", }, ], false ), }, }, animationEasing: "elasticOut", }, { // 分隔 type: "pictorialBar", itemStyle: { normal: { color: "#143362", }, }, symbolRepeat: "fixed", symbolMargin: 8, symbol: "rect", symbolClip: false, symbolSize: [4, 20], symbolPosition: "start", symbolOffset: [0, -2], symbolBoundingData: total, data: [total, total, total, total], z: 2, animationEasing: "elasticOut", }, { // label type: "pictorialBar", symbolBoundingData: total, itemStyle: { normal: { color: "none", }, }, label: { normal: { formatter: (params) => { var text; if (total == 0) { text = `0 人 | 0%`; return text } if (params.value >= 10) { if (((params.value / total) * 100).toFixed(0) < 10) { text = `${(" " + params.value)}人 | ${(((params.value) / total) * 100).toFixed(0)}%`; } else { text = `${(params.value)}人 | ${(((params.value) / total) * 100).toFixed(0)}%`; } } else { text = `${(" " + params.value)}人 | ${(((params.value) / total) * 100).toFixed(0)}%`; } return text; }, textStyle: { // 图列内容样式 fontSize: "30", fontWeight: 800, }, position: "right", offset: [0, -3], distance: 10, // 向右偏移位置 show: true, color: "#FFF", }, }, data: datas, z: 0, }, { name: "外框", type: "bar", barGap: "-130%", // 设置外框粗细 data: totalBorderList, barWidth: 26, itemStyle: { normal: { // barBorderRadius: [5, 5, 5, 5], borderWidth: 1, // 边框宽度 borderColor: "rgb(51, 147, 236)", // 边框色 color: "rgb(231,238,249)", }, }, z: 0, }, ], }; //轮播 // tools.loopShowTooltip(leftEcharts1, option, { // interval: 2000, // loopSeries: true, // }); //注册 if (type) { that[type].setOption(option); } else { myChart.setOption(option); } }, initVitaEcharts(el, data) { let that = this; if (this.vitaEcharts) { this.vitaEcharts.dispose() } this.vitaEcharts = echarts.init(el) let dataList = [...that.vitaData.y] let max = dataList.sort(function (a, b) { return b - a })[0] let maxList = [] this.vitaData.x.forEach(item => { maxList.push(max) }) option = { tooltip: { show: true, backgroundColor: 'rgba(0, 0, 0, 0.3)', borderColor: "rgba(0,0,0,0.5)", trigger: 'axis', textStyle: { fontSize: 30, color: '#A3E2F4' }, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: "{a} : {c}人" }, animation: true, grid: { top: "12%", bottom: "8%", right: "2%" }, xAxis: { data: that.vitaData.x, axisLine: { show: false //隐藏X轴轴线 }, axisTick: { show: false //隐藏X轴轴线 }, splitLine: { show: false, lineStyle: { color: "rgba(77, 128, 254, 0.2)", width: 2 } }, axisLabel: { show: true, interval: 0, fontSize: 24, textStyle: { color: "#fff" //X轴文字颜色 } } }, yAxis: [{ name: "报名/人", type: "value", gridIndex: 0, min: 0, max: 100, interval: 25, // splitNumber: 4, splitLine: { show: false, lineStyle: { color: "rgba(77, 128, 254, 0.2)", width: 2 } }, axisTick: { show: false }, nameTextStyle: { fontSize: 28, color: "#B6BFCE" }, axisLine: { show: false, lineStyle: { color: "rgba(77, 128, 254, 0.2)" } }, axisLabel: { show: true, margin: 14, fontSize: 26, textStyle: { color: "#65D5FF" } } }], series: [{ name: "报名人数", type: "bar", barWidth: 16, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: "#004E8E" }, { offset: 0, color: "#40A9FF" } ]) } }, data: that.vitaData.y, z: 10, zlevel: 0 }, { // 分隔 type: "pictorialBar", itemStyle: { normal: { color: "#0F375F" } }, symbolRepeat: "fixed", symbolMargin: 6, symbol: "rect", symbolClip: true, symbolSize: [18, 2], symbolPosition: "start", symbolOffset: [1, 1], data: that.vitaData.y, width: 2, z: 0, zlevel: 1 }, { name: "外框", type: "bar", barGap: "-110%", // 设置外框粗细 data: maxList, barWidth: 16, itemStyle: { normal: { color: "transparent", // 填充色 // barBorderRadius: 0, //圆角半径 label: { // 标签显示位置 show: false, position: "top" // insideTop 或者横向的 insideLeft } } }, z: 0 }, { name: "背影", type: "line", smooth: true, //平滑曲线显示 showAllSymbol: false, //显示所有图形。 symbolSize: 0, lineStyle: { width: 0 }, areaStyle: { color: "rgba(0, 151, 251, 0.1)" }, data: that.vitaData.y, z: 5 } ], dataZoom: [{ type: "slider", show: false, xAxisIndex: [0], endValue: 12, startValue: 0 }] } this.vitaEcharts.setOption(option) tools.loopShowTooltip(this.vitaEcharts, option, { nterval: 2000, loopSeries: true, }); }, initRoseEcharts(el, myData = { number: ['10', '13', '20'], titlename: ["地面", "辅助", "一线"], }) { this.roseEcharts = echarts.init(el) var colorArr = ["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#f6d54a", "#f845f1"]; var colorAlpha = ['rgba(60,170,211,0.05)', 'rgba(1,203,179,0.05)', 'rgba(133,230,71,0.05)', 'rgba(93,92,218,0.05)', 'rgba(5,197,176,0.05)', 'rgba(194,153,39,0.05)']; var myProperty = { titlefontsize: 30, polarradius: '60%', pieradius: '60%', length1: 10, length2: 55, }; var data = []; var total = 0; for (var i = 0; i < myData.number.length; i++) { total += (Number)(myData.number[i]); } for (let index = 0; index < myData.titlename.length; index++) { data.push({ value: myData.number[index], name: myData.titlename[index], itemStyle: { normal: { borderColor: colorArr[index], borderWidth: 2, shadowBlur: 20, shadowColor: colorArr[index], shadowOffsetx: 25, shadowOffsety: 20, color: colorAlpha[index] } }, label: { normal: { formatter: ['{b|{b}: {c}个}', '{d| {d}%}'].join('\n'), //join函数将数组中的元素用选择的分隔符拼接成一个字符串 rich: { b: { color: colorArr[index], fontSize: myProperty.titlefontsize, lineHeight: 20 }, d: { color: '#d0fffc', fontSize: myProperty.titlefontsize, //手动输入的字体大小 height: 50, align: 'center', //这里是控制文本的位置 此时是居中 }, }, } }, }) } option = { grid: { left: -100, top: 50, bottom: 10, right: 10, containLabel: true }, tooltip: { show: true, backgroundColor: 'rgba(0, 0, 0, 0.3)', borderColor: "rgba(0,0,0,0.5)", trigger: 'item', textStyle: { fontSize: 30, color: '#A3E2F4' }, }, polar: { // radius: ['0%','60%'], //radius:[0,200] radius: myProperty.polarradius, }, angleAxis: { interval: 1, type: 'category', data: [], z: 10, axisLine: { show: false, lineStyle: { color: "#0B4A6B", width: 1, type: "solid" }, }, axisLabel: { interval: 0, show: true, color: "#0B4A6B", margin: 8, fontSize: 16 }, }, radiusAxis: { min: 20, max: 120, interval: 20, axisLine: { show: false, lineStyle: { color: "#0B3E5E", width: 1, type: "solid" }, }, axisLabel: { formatter: '{value} %', show: false, padding: [0, 0, 20, 0], color: "#0B3E5E", fontSize: 16 }, splitLine: { lineStyle: { color: "#07385e", width: 2, type: "dashed" } }, }, calculable: true, series: [{ stack: 'a', type: 'pie', radius: myProperty.pieradius, roseType: 'radius', zlevel: 10, startAngle: 100, labelLine: { normal: { show: true, length: myProperty.length1, length2: myProperty.length2, lineStyle: { color: '#0096b1' } }, emphasis: { show: false } }, data: data, },] }; this.roseEcharts.setOption(option) tools.loopShowTooltip(this.roseEcharts, option, { nterval: 2000, loopSeries: true, }); }, initChartsBig(arr = [ { name: '地面', y: 10, sliced: false, selected: false, }, { name: '辅助', y: 10, sliced: false, selected: false, }, { name: '一线', y: 10, sliced: false, selected: false, }, ]) { let left5 = arr var chartData = left5 var timer = null; var i = 0; let that = this var option = { colors: [ "#D9E1F2", "#B4C6E7", "#8EA9DB", "#305496", "#203764", ], chart: { type: 'pie', backgroundColor: 'rgba(0,0,0,0)', options3d: { enabled: true, alpha: 45, //beta: 0 }, events: { // load，图表加载完成时触发 load: function () { var chart = this; var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', data: chartData }] }) } }, 1000); }, legendItemClick: function (event) { return true; } } }, credits: { enabled: false //去掉hightchats水印 }, legend: { align: 'right', //横向位置 verticalAlign: 'middle', // 纵向位置 layout: "vertical", //横排还是竖排 x: 10, y: 100, symbolWidth: 30, itemStyle: { fontSize: '30px', color: '#fff', x: 20, fontWeight: 0, fontFamily: 'Microsoft YaHei' }, }, title: { enabled: false, text: "", }, tooltip: { crosshairs: false, trigger: "axis", backgroundColor: 'rgba(0, 0, 0, 0.5)', borderColor: "rgba(0,0,0,0.5)", style: { fontSize: 30, color: '#A3E2F4', fontWeight: 0, }, axisPointer: { lineStyle: { color: "#ddd", }, }, formatter: function (e) { this.percentage = this.percentage.toFixed(2) //Math.round(this.percentage) return `${this.key}：${this.y}（${this.percentage}%）` }, }, plotOptions: { pie: { allowPointSelect: true, showInLegend: true, // 图例 cursor: 'pointer', size: 350, innerSize: 0, //环形图中间空白，0为饼图 depth: 80, //立体高度 slicedOffset: 40, //动画距离 dataLabels: { enabled: false, // 是否展示指示线 format: '{point.name}: {point.percentage}' } }, }, series: [{ type: 'pie', name: '占比', center: ['50%', '50%'], point: { events: { mouseOver: function (e) { //鼠标移入停止轮播并且找到移入的当前数据设为选中 chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chartData[e.target.index].sliced = true chartData[e.target.index].selected = true chart.update({ series: [{ type: 'pie', name: '占比', point: { events: { click: function (e) { that.showChartLTipDouble(e.point.name) } } }, data: chartData }] }) timer && clearInterval(timer); }, mouseOut: function () { // 鼠标移出后需要继续执行轮播 var points = chart.series[0].points; var len = points.length; timer && clearInterval(timer); timer = setInterval(function () { autoTooltip(points[i]); chartData.forEach((item, index) => { item.sliced = false item.selected = false if (index == i) { item.sliced = true item.selected = true } }) chart.update({ series: [{ type: 'pie', name: '占比', data: chartData }] }) i++; if (i === len) { i = 0; chartData.forEach((item, index) => { item.sliced = false item.selected = false }) chart.update({ series: [{ type: 'pie', name: '占比', data: chartData }] }) } }, 2000); } } }, data: chartData }] } if (that.hecharts) { that.hecharts.destroy(); } that.hecharts = Highcharts.chart('echartL2', option); function autoTooltip(point) { that.hecharts.tooltip.refresh(point); } }, initThreeBig(el) { let that = this this.roseEcharts = echarts.init(el) var placeHolderStyle = { normal: { label: { show: false }, labelLine: { show: false }, color: "rgba(0,0,0,0)", borderWidth: 0 }, emphasis: { color: "rgba(0,0,0,0)", borderWidth: 0 } }; var dataStyle = { normal: { formatter: function (res) { return res.data.value }, position: 'center', show: true, textStyle: { fontSize: '35', fontWeight: 'bolder', color: '#fff' } } }; option = { title: [{ text: '地面', left: '19%', top: '70%', textAlign: 'center', textStyle: { fontWeight: 'normal', fontSize: '30', color: '#fff', textAlign: 'center', }, }, { text: '辅助', left: '49%', top: '70%', textAlign: 'center', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: '30', textAlign: 'center', }, }, { text: '一线', left: '79%', top: '70%', textAlign: 'center', textStyle: { color: '#fff', fontWeight: 'normal', fontSize: '30', textAlign: 'center', }, }], series: [{ type: 'pie', hoverAnimation: false, //鼠标经过的特效 // radius: ['55%', '61%'], radius: ['45%', '50%'], center: ['20%', '50%'], startAngle: 225, labelLine: { normal: { show: false } }, label: { normal: { position: 'center' } }, data: [{ value: that.recruitTypeList[0] || 0, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#99da69' }, { offset: 1, color: '#01babc' }]), } }, label: dataStyle, }, { value: that.recruitTypeMax || 0, itemStyle: placeHolderStyle, }, ] }, { type: 'pie', hoverAnimation: false, //鼠标经过的特效 radius: ['45%', '50%'], center: ['50%', '50%'], startAngle: 225, labelLine: { normal: { show: false } }, label: { normal: { position: 'center' } }, data: [{ value: that.recruitTypeList[1] || 0, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FBAB7E' }, { offset: 1, color: '#F7CE68' }]), } }, label: dataStyle, }, { value: that.recruitTypeMax || 0, itemStyle: placeHolderStyle, }, ] }, { type: 'pie', hoverAnimation: false, // radius: ['55%', '61%'], radius: ['45%', '50%'], center: ['80%', '50%'], startAngle: 225, labelLine: { normal: { show: false } }, label: { normal: { position: 'center' } }, data: [{ value: that.recruitTypeList[2] || 0, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#9f3edd' }, { offset: 1, color: '#4897f6' }]), } }, label: dataStyle, }, { value: that.recruitTypeMax || 0, itemStyle: placeHolderStyle, }, ] }, //外圈的边框 { // name: '总人数', type: 'pie', hoverAnimation: false, //鼠标经过的特效 radius: ['51%', '52%'], center: ['20%', '50%'], startAngle: 225, labelLine: { normal: { show: false } }, label: { normal: { position: 'center' } }, data: [{ value: 12, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#01babc' }, { offset: 1, color: '#99da69' }]), } }, }, { value: 4, itemStyle: placeHolderStyle, }, ] }, { // name: '总人数', type: 'pie', hoverAnimation: false, //鼠标经过的特效 // radius: ['61%', '62%'], radius: ['51%', '52%'], center: ['50%', '50%'], startAngle: 225, labelLine: { normal: { show: false } }, label: { normal: { position: 'center' } }, data: [{ value: 15, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FBAB7E' }, { offset: 1, color: '#F7CE68' }]), } }, }, { value: 5, itemStyle: placeHolderStyle, }, ] }, { type: 'pie', hoverAnimation: false, // radius: ['61%', '62%'], radius: ['51%', '52%'], center: ['80%', '50%'], startAngle: 225, labelLine: { normal: { show: false } }, label: { normal: { position: 'center' } }, data: [{ value: 9, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#4897f6' }, { offset: 1, color: '#9f3edd' }]), } }, }, { value: 3, itemStyle: placeHolderStyle, }, ] }, ] }; this.roseEcharts.setOption(option) // tools.loopShowTooltip(this.roseEcharts, option, { // nterval: 2000, // loopSeries: true, // }); }, handleClick(from, type) { this.handleMark() let that = this; this.from = from this.type = type this.newList = [] if (that.from == "timeList2" && that.leftFlag) { this.newList = that.allTimeList[1] } else if (that.from == "timeList2" && !that.leftFlag) { this.newList = that.allTimeList[0] } else if (that.from == "timeList1") { this.newList = that.allTimeList[2] } // let that = this; if (from == "timeList1" && type == 1) { that.markStyle = { right: "1%", bottom: "4%" } } else if (from == "timeList1" && type == 0) { that.markStyle = { right: "5%", bottom: "4%" } } else if (from == "timeList2" && type == 0) { that.markStyle = { right: "87%", bottom: "43%" } } else if (from == "timeList2" && type == 1) { that.markStyle = { right: "84%", bottom: "43%" } } this.showMark = true this.showSelect = true }, handleMark() { this.showMark = false this.showSelect = false this.showMonth = false }, handleOption(item) { let that = this this[this.from][this.type] = item this.handleMark() if (this.from == "timeList2") { if (that.from == "timeList2" && that.leftFlag) { this.getPositionAll() } else { that.getRecruitType() } } if (this.from == "timeList1") { this.getDelivcvAndApply() } }, handleMonthOption(item) { this.monthItem = item this.handleMark() }, handleMonth() { this.handleMark() this.showMark = true this.showMonth = true }, ortherEcharts(el, data) { this.vitaEcharts = echarts.init(el); option = { tooltip: { show: true, trigger: 'axis', textStyle: { fontSize: 30, color: '#A3E2F4' }, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'none' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { top: '8%', left: '1%', right: '1%', bottom: '8%', containLabel: true, }, xAxis: [{ type: 'category', boundaryGap: false, axisLine: { //坐标轴轴线相关设置。数学上的x轴 show: false, lineStyle: { color: '#233e64' }, }, axisLabel: { //坐标轴刻度标签的相关设置 textStyle: { color: '#fff', fontSize: 26, margin: 15, }, }, axisTick: { show: false, }, data: ['6.1', '6.2', '6.3', '6.4', '6.5', '6.6', '6.7'], }], yAxis: [{ type: 'value', min: 0, max: 140, splitLine: { show: true, lineStyle: { color: '#233e64' } }, axisLine: { show: false, }, axisLabel: { margin: 20, textStyle: { color: '#fff', fontSize: 24, }, }, axisTick: { show: false, }, }], series: [{ name: '异常流量', type: 'line', smooth: true, //是否平滑曲线显示 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 symbolSize: 0, lineStyle: { normal: { color: "#3deaff" // 线条颜色 } }, areaStyle: { //区域填充样式 normal: { //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(61,234,255, 0.9)' }, { offset: 0.7, color: 'rgba(61,234,255, 0.1)' } ], false), shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色 shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 } }, data: [90, 105, 84, 125, 110, 92, 98] }] }; this.vitaEcharts.setOption(option); tools.loopShowTooltip(this.vitaEcharts, option, { nterval: 2000, loopSeries: true, }); }, hanleIcon() { this.vitaEcharts.dispose() this.downholeFlag = !this.downholeFlag if (this.downholeFlag) { setTimeout(() => { let vita = this.$refs.vita this.initVitaEcharts(vita) }) } // if (this.echartsIndex == 1) { // this.ortherEcharts(vita) // this.echartsIndex = 2 // } else { // this.echartsIndex = 1 // } }, handleChangeType(type, index) { let that = this; if (type) { that.rightTime && clearInterval(that.rightTime) that.rightList.forEach(item => { item.flag = false }) that.rightList[index].flag = true that.rightIndex = index this.rightTime = setInterval(() => { that.rightList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { that.rightIndex = index } }) }, 5000) } else { that.leftTime && clearInterval(that.leftTime) that.leftList.forEach(item => { item.flag = false }) that.leftList[index].flag = true that.leftIndex = index if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } that.leftTime = setInterval(() => { that.leftList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } } }) }, 15000) } }, getPlayers() { let that = this; let data = { flag: that.dataFlag }; fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/Players", data).then(res => { if (res) { that.mainList[1].value = res.value } }) }, getPostDetail() { let that = this; let data = { flag: that.dataFlag }; that.isShowInfoList = false that.recruitInfoIndex = 0 that.recruitInfoList = [] that.rollTitle = "" that.listChange && clearInterval(that.listChange) fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/PostDetail", data).then(res => { let list = [] let a = [] if (res) { if (res.data.length != 0) { res.data.forEach((item, index) => { list.push([item[0], item[1], item[2], item[3], item[4]]) a[index] = [] let arr = item[5].split("&") if (arr[0].length == 2) { arr.shift() } arr.forEach(i => { let infos = i.split("\r") let obj = { title: infos[0], content: infos[1] } a[index].push(obj) }) }) that.config1.data = list that.recruitInfoList.push(...a) that.isShowInfoList = true that.itemClass = "item_content_99" if (that.config1.data.length <= that.config1.rowNum) { that.listChange = setInterval(() => { // that.configDataIndex if (that.configDataIndex >= that.config1.data.length) { that.configDataIndex = 1 that.itemClass = "item_content_99" that.funChangeList(0) that.recruitInfoIndex = 0 return } that.itemClass = "item_content_" + (that.configDataIndex + 5) that.funChangeList(that.configDataIndex) // that.recruitInfoIndex = that.configDataIndex that.configDataIndex += 1 that.recruitInfoIndex += 1 }, that.config1.waitTime) } else { setTimeout(() => { // that.classChange = true that.itemClass = "item_content_6" setTimeout(() => { let itemContent = document.getElementById("itemContent") if (itemContent) { let target = itemContent.getElementsByClassName("row-item") let targetList = target.item(0) targetList.style.background = "#302e2d50" targetList.style.color = "#E1AF27" } }, 0) }, 5000); } that.funChangeList(0) } else { that.config1.data = list that.itemClass = "item_content_6" that.listChange && clearInterval(that.listChange) setTimeout(() => { let itemContent = document.getElementById("itemContent") if (itemContent) { let target = itemContent.getElementsByClassName("row-item") let targetList = target.item(0) targetList.style.background = "#302e2d50" targetList.style.color = "#E1AF27" } }, 0) } } setTimeout(() => { this.recruitInfoList.forEach(item => { // if(item.content){ // console.log(item.content.split("\n")); // } item.forEach(i => { i.infos = i.content.split("\n").filter(Boolean) }) }) that.isShowInfoList = true }) }) }, handleBR(item) { return item }, funChangeList(idnex) { let listIndex = idnex // this.address = this.config1.data[listIndex][0] + "。" this.rollTitle = this.config1.data[listIndex][0] + this.config1.data[listIndex][1] + "双选公告" || "" setTimeout(() => { this.rollFlag = true }) }, getHalfYearDelivcv() { let that = this; let data = { flag: that.dataFlag }; fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/HalfYearDelivcv", data).then(res => { if (res) { let list = [] res.forEach(item => { if (item.key == "月份") { // that.vitaData.x = item.value item.value.forEach(i => { list.push(i + "月") }) } if (item.key == "数量") { that.vitaData.y = item.value } }) that.vitaData.x = list let vita = this.$refs.vita that.initVitaEcharts(vita) } }).catch(err => { let vita = this.$refs.vita that.initVitaEcharts(vita) }) }, getHotDelivcv() { let that = this; let data = { flag: that.dataFlag }; fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/HotDelivcv", data).then(res => { if (res) { that.typeList.data = res.data } }) }, arrToListArr() { this.isChangeList = false let that = this; let data = { flag: that.dataFlag } fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/Delivcv", data).then(res => { let imageList = [] let nameList = [] let stationList = [] let timeList = [] let dataList = [] if (res) { res.data.forEach(item => { if (item.key == "头像地址") { imageList.push(...item.value) } if (item.key == "姓名") { nameList.push(...item.value) } if (item.key == "投递岗位") { stationList.push(...item.value) } if (item.key == "申请时间") { timeList.push(...item.value) } }) nameList.forEach((item, index) => { dataList.push(["", item, stationList[index], timeList[index]]) }) this.configMark.data = dataList this.isChangeList = true delete imageList delete nameList delete stationList delete timeList } }) }, getDelivcvAndApply() { let that = this; let data = { flag: that.dataFlag, data1: that.timeList1[0], data2: that.timeList1[1] }; let pageBtm = this.$refs.pageBtm fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/DelivcvAndApply", data).then(res => { if (res) { res.data.forEach(item => { if (item.key == "单位名称") { admissionList.x = item.value } if (item.key == "招聘人数") { admissionList.y1 = item.value } if (item.key == "报名人数") { admissionList.y2 = item.value } if (item.key == "录用人数") { admissionList.y3 = item.value } if (item.key == "开始时间") { that.allTimeList[2] = that.getYearMonth(item.value) } }) this.initDownholeEcharts(pageBtm, { x: admissionList.x, y1: admissionList.y1, y2: admissionList.y2, y3: admissionList.y3 }) } }) }, isRendering(data, type, key, flag) { let that = this; if (that[type] == 0) { that[key].data = data setTimeout(() => { that[flag] = true }, 10) that[type] = 1 } else { if (data[0][1] != that[key].data[0][1] || data[0][2] != that[key].data[0][2] || data[0][3] != that[key].data[0][3]) { that[flag] = false that[key].data = data setTimeout(() => { that[flag] = true }, 10) } } }, getRecruitType() { let that = this; let data = { flag: that.dataFlag, start: that.timeList2[0], end: that.timeList2[1], } that.recruitTypeList = [] fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/RecruitType", data).then(res => { if (res) { res.data.forEach(item => { if (item.key == "一线") { that.recruitTypeList[2] = item.value that.recruitTypeMax += item.value } else if (item.key == "地面") { that.recruitTypeList[0] = item.value that.recruitTypeMax += item.value } else if (item.key == "辅助") { that.recruitTypeList[1] = item.value that.recruitTypeMax += item.value } else if (item.key == "开始时间") { that.allTimeList[0] = that.getYearMonth(item.value) } }) let leftChange = that.$refs.leftChange if (leftChange) { that.initThreeBig(leftChange) } that.leftTime && clearInterval(that.leftTime) that.leftTime = setInterval(() => { that.leftList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } } }) }, 15000) } }) }, getYearMonth(date) { // 获取指定日期的年份和月份 let targetDate = new Date(date); let targetYear = targetDate.getFullYear(); let targetMonth = targetDate.getMonth() + 1; // 月份从0开始计数，需要加1 // 获取当前日期的年份和月份 let currentDate = new Date(); let currentYear = currentDate.getFullYear(); let currentMonth = currentDate.getMonth() + 1; // 月份从0开始计数，需要加1 // 定义结果数组 let result = []; // 循环遍历年份和月份，从目标日期到当前日期 for (let year = targetYear; year <= currentYear; year++) { // 起始月份为目标年份的起始月份，结束月份为当前年份的结束月份 let startMonth = (year === targetYear) ? targetMonth : 1; let endMonth = (year === currentYear) ? currentMonth : 12; // 循环遍历月份，并将年份和月份添加到结果中 for (let month = startMonth; month <= endMonth; month++) { let formattedMonth = month.toString().padStart(2, '0'); // 格式化为两位数的月份 result.push(`${year}-${formattedMonth}`); } } // 输出全部的年月 return result.reverse() }, getFailReason() { let that = this; let data = { flag: that.dataFlag }; // leftErrorList:["信息不完整","信息有误","任职条件不符","出勤不足","工作年限不符"] fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/FailReason", data).then(res => { if (res) { if (res.data.length != 0) { let dataList = [] let total = 0 // dataList.forEach(item => { // total = total + item.value // }) that.rightData.push(...dataList) res.data.forEach((item, index) => { item.forEach(i => { let obj = {} if (i.key == "不通过原因") { that.leftErrorList[index] = i.value } if (i.key == "不通过数量") { obj.value = i.value dataList[index] = obj total = total + i.value } }) }) // for (const child of echartsErrorBox.children) { // console.log(child); // // let title = "lineRight" + (i + 1) // that.initLineRight(child.children[1], { value: dataList[i].value, total }) // // that.initLineRight(child.children[1], { value: dataList[i].value, total }, title) // } let echartsErrorBox = that.$refs.echartsErrorBox setTimeout(() => { for (const child of echartsErrorBox.children) { const index = Array.prototype.indexOf.call(echartsErrorBox.children, child); let title = "lineRight" + (index + 1) that.initLineRight(child.children[1], { value: dataList[index].value, total }, title) } }, 10) } } }) }, getQualAudits() { let that = this; let data = { flag: that.dataFlag }; fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/QualAudits", data).then(res => { if (res) { res.data.forEach(item => { if (item.key == "当前总人数") { that.rightList[0].num1 = item.value } if (item.key == "通过总人数") { that.rightList[0].num2 = item.value } if (item.key == "当前通过率") { that.rightList[0].num3 = item.value } }) } }) }, getNo(arr) { if (Array.isArray(arr)) { arr.forEach((item, index) => { if (index <= 8) { item.unshift("0" + (index + 1)) } else { item.unshift((index + 1).toString()) } }) } return arr }, getNoticePerson(type = 3) { let that = this; if (type == 1) { that.showExamination = false } else if (type == 2) { that.showInterview = false } else { this.showExamination = false this.showInterview = false } let year = new Date().getFullYear() let data = { flag: that.dataFlag, year, month: 0 } fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/assessmentarrangement", data).then(res => { if (res) { for (let key in res) { if (Array.isArray(res[key])) { res[key].forEach(item => { // item.splice(item.length - 2, 1); if (item[item.length - 1]) { item[item.length - 1] = item[item.length - 1].replaceAll("年", "-") item[item.length - 1] = item[item.length - 1].replaceAll("月", "-") item[item.length - 1] = item[item.length - 1].replaceAll("日", " ") item[item.length - 1] = item[item.length - 1].replaceAll("/", "-") item[item.length - 1] = item[item.length - 1].replaceAll("|", "-") } }) } } let arr = [] let len = false if (res.bishiList.length != 0) { arr.push(...that.getNo(res.bishiList)) if (arr.length % 2 == 0) { arr.push([]) len = true } res.bishiList = [] res.bishiList = arr.filter((_, index) => index % 2 === 0); res.mianshiList = arr.filter((_, index) => index % 2 !== 0); that.configInterviewElse.data = [...arr] if (len) { that.configInterviewElse.data.pop() } } else if (res.mianshiList.length != 0) { arr.push(...that.getNo(res.mianshiList)) if (arr.length % 2 != 0) { arr.push([]) len = true } res.mianshiList = [] res.bishiList = arr.filter((_, index) => index % 2 === 0); res.mianshiList = arr.filter((_, index) => index % 2 !== 0); that.configInterviewElse.data = [...arr] if (len) { that.configInterviewElse.data.pop() } } if (type == 1) { that.configWritten.data = res.bishiList // that.configWritten.data = that.getNo(res.bishiList) setTimeout(() => { that.showExamination = true }, 10) } else if (type == 2) { that.configInterview.data = res.mianshiList // that.configInterview.data = that.getNo(res.mianshiList) setTimeout(() => { that.showInterview = true }, 10) } else { that.configWritten.data = res.bishiList // that.configWritten.data = that.getNo(res.bishiList) that.configInterview.data = res.mianshiList // that.configInterview.data = that.getNo(res.mianshiList) setTimeout(() => { that.showInterview = true that.showExamination = true }, 10) if (that.configWritten.data.length <= that.configWritten.rowNum) { that.bishiTime && clearInterval(that.bishiTime) that.bishiTime = setInterval(() => { console.log("笔试面试数据更新"); that.getNoticePerson(1) }, (10000 * 6 * 5)) } if (that.configInterview.data.length <= that.configInterview.rowNum) { that.mianshiTime && clearInterval(that.mianshiTime) that.mianshiTime = setInterval(() => { console.log("笔试面试数据更新"); that.getNoticePerson(2) }, (10000 * 6 * 5)) } } } }) }, scrollChangeList(index) { let that = this; that.noticTime && clearInterval(that.noticTime) setTimeout(() => { if (index + 5 == that.employmentList1.data.length) { that.isListEnd = that.isListEnd + 1 if (that.isListEnd == 2) { that.isListEnd = 0 that.isShowList = false that.employmentList1.data = [] that.employmentList2.data = [] that.noticeIndex = that.noticeIndex + 1 if (that.noticeIndex > that.noticeList.length - 1) { that.noticeIndex = 0 } // that.getNoticePerson("李四是五") setTimeout(() => { that.isShowList = true }, 10) } } }, 1700) if (index == 0) { console.log("index == 0"); } if (index == that.employmentList1.data.length - 1) { } }, changeCardNo(str) { let arr = [] let list = [] if (str.length != 0) { arr = str.split("") for (let i = 0; i <= arr.length - 1; i++) { if (i < 5) { list.push(arr[i]) } else if (i > 5 && i < 14) { list.push("*") } else { list.push(arr[i]) } } } return list.join("") }, changeNoticList(arr) { let list = [] let that = this; if (Array.isArray(arr)) { arr.forEach((item, index) => { let a = [] if (index <= 8) { a = ["0" + (index + 1), item.name, item.sex, that.changeCardNo(item.cardno), item.org1] } else { a = [(index + 1).toString(), item.name, item.sex, that.changeCardNo(item.cardno), item.org1] } list.push(a) }) } return list }, getNotice() { let that = this; let data = { flag: that.dataFlag }; this.isShowList = false that.employmentList1.data = [] that.employmentList2.data = [] that.employmentList3.data = [] that.noticIndex = 0 that.noticList = [] fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/getNotice", data).then(res => { if (res && res.length != 0) { res.forEach((item, index) => { let obj = { noticeDataList: item.noticeDataList, noticeUserList: that.changeNoticList(item.noticeUserList) } that.noticList.push(obj) }) // if (that.noticList[that.noticIndex]) { that.noticList[that.noticIndex].noticeUserList.forEach((item, index) => { if (index % 2 == 0) { that.employmentList1.data.push(item) } else { that.employmentList2.data.push(item) } }) that.employmentList3.data.push(...that.noticList[that.noticIndex].noticeUserList) // } if (res.length != 1) { that.noticIndex += 1 if (that.employmentList2.data.length <= that.employmentList2.rowNum) { that.noticTime = setInterval(() => { that.employmentList1.data = [] that.employmentList2.data = [] that.employmentList3.data = [] that.isShowList = false // if(that.noticList[that.noticIndex]){ that.noticList[that.noticIndex].noticeUserList.forEach((item, index) => { if (index % 2 == 0) { that.employmentList1.data.push(item) } else { that.employmentList2.data.push(item) } }) that.employmentList3.data.push(...that.noticList[that.noticIndex].noticeUserList) // } that.noticIndex += 1 if (that.noticIndex > that.noticList.length - 1) { that.noticIndex = 0 } setTimeout(() => { that.isShowList = true }, 10) }, that.employmentList2.data.length * 2000) } } setTimeout(() => { that.isShowList = true }) } }) // that.noticeList = res.data }, getDoubleChoice() { let that = this; let data = { flag: that.dataFlag } fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/DoubleChoice", data).then(res => { if (res) { that.mainList[0].value = res.value } }) }, getPositionAll() { let that = this; let data = { flag: that.dataFlag, start: that.timeList2[0], end: that.timeList2[1], } // this.leftTime && clearInterval(this.leftTime) fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/PositionAll", data).then(res => { that.leftFlag = false that.config2.data = [] let lastList = [] let topList = [] let mainList = [] if (res) { if (res.date) { that.allTimeList[1] = that.getYearMonth(res.date.value) } res.data.forEach((item, index) => { if (index <= 8) { item.unshift("0" + (index + 1)) } else { item.unshift((index + 1).toString()) } }) if (res.data.length > 5) { for (let i = 0; i < 3; i++) { let color; if (i == 0) { color = "yellow" } else if (i == 1) { color = "red" } else { color = "green" } topList.push(["" + res.data[i][0] + "", "" + res.data[i][1] + "", "" + res.data[i][2] + ""]) } res.data.splice(0, 3) mainList.push(...spArr(res.data, 2)) mainList.forEach(item => { item.unshift(...topList) if (item.length < 5) { item.push(["", "", ""]) } lastList.push(...item) }) } else if (res.data.length <= 5 && res.data.length >= 3) { for (let i = 0; i < 3; i++) { let color; if (i == 0) { color = "yellow" } else if (i == 1) { color = "red" } else { color = "green" } topList.push(["" + res.data[i][0] + "", "" + res.data[i][1] + "", "" + res.data[i][2] + ""]) } res.data.splice(0, 3) lastList.push(...topList, ...res.data) } else if (res.data.length < 3) { for (let i = 0; i < res.data.length; i++) { let color; if (i == 0) { color = "yellow" } else if (i == 1) { color = "red" } else { color = "green" } lastList.push(["" + res.data[i][0] + "", "" + res.data[i][1] + "", "" + res.data[i][2] + ""]) } } that.config2.data = lastList that.leftTime && clearInterval(that.leftTime) that.leftTime = setTimeout(() => { that.leftFlag = true that.leftTime = setInterval(() => { that.leftList.forEach((item, index) => { item.flag = !item.flag if (item.flag) { if (index == 0) { that.leftFlag = true // that.timeList2 = [that.allTimeList[1][1], that.allTimeList[1][0]] that.getPositionAll() } else { that.leftFlag = false // that.timeList2 = [that.allTimeList[0][1], that.allTimeList[0][0]] that.getRecruitType() setTimeout(() => { let leftChange = that.$refs.leftChange that.initThreeBig(leftChange) }) } } }) }, 15000) }, 10) } }) }, getTotalRate() { let that = this; let data = { flag: that.dataFlag }; fetchPostMethods("/ierp/kapi/v2/mdnb/mdnb_control/TotalRate", data).then(res => { if (res) { // that.rightList res.data.forEach(item => { if (item.key == "累计人数") { that.rightList[1].num1 = item.value } if (item.key == "累计通过人数") { that.rightList[1].num2 = item.value } if (item.key == "通过率") { that.rightList[1].num3 = item.value } }) } }) }, scrollChangeListW(index) { let that = this; if (index + that.configInterview.rowNum == that.configInterview.data.length) { console.log("笔试更新"); setTimeout(() => { that.getNoticePerson(1) }, 1700) } }, scrollChangeListIn(index) { let that = this; if (index + that.configInterview.rowNum == that.configInterview.data.length) { console.log("面试更新"); setTimeout(() => { that.getNoticePerson(2) }, 1700) } }, scrollChangeListElse(index) { let that = this; if (index + that.configInterviewElse.rowNum == that.configInterviewElse.data.length) { console.log("面试更新"); setTimeout(() => { that.getNoticePerson() }, 1700) } }, }, })