pc_kingdee_large_screen/cokingCoal/js/humanResources.js

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: [
                    ["<span class='yellow'>01</span>", "<span class='yellow'>西山煤电</span>", "<span class='yellow'>30个</span>"],
                    ["<span class='red'>02</span>", "<span class='red'>山煤国际</span>", "<span class='red'>25个</span>"],
                    ["<span class='green'>03</span>", "<span class='green'>汾西矿业</span>", "<span class='green'>20个</span>"],
                    ["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: [
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>西山煤电</span>", "<span class=''>71</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>汾西矿业</span>", "<span class=''>1896</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>霍州煤电</span>", "<span class=''>847</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>山煤国际</span>", "<span class=''>514</span>", "<span class=''>3月</span>"],
                    ["<img class='list_img' src='https://www.bootcdn.cn/assets/img/m-react.png' alt=''>", "<span class=''>华晋焦煤</span>", "<span class=''>13</span>", "<span class=''>3月</span>"],
                ],
                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 '<span style="color: #fff;">综合得分：' + getvalue + '分</span>';
                    }
                },
                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)
        },
    },
})