|
|
@@ -7,25 +7,102 @@
|
|
|
* @LastEditTime: 2020-08-12 18:37:45
|
|
|
-->
|
|
|
<template>
|
|
|
- <div>
|
|
|
+<div>
|
|
|
<div class="flex">
|
|
|
- <div ref="mychart1" :style="{width: '75%', height: '500px'}"></div>
|
|
|
- <div class="flex1">
|
|
|
- <div>
|
|
|
- <div class="num">校招投递简历总数 {{schoolTotal||0}}条</div>
|
|
|
- <div class="num">社招投递简历总数 {{clubTotal||0}}条</div>
|
|
|
+ <div ref="mychart1" :style="{width: '75%', height: '500px'}"></div>
|
|
|
+ <div class="flex1">
|
|
|
+ <div>
|
|
|
+ <div class="num">校招投递简历总数 {{schoolTotal||0}}条</div>
|
|
|
+ <div class="num">社招投递简历总数 {{clubTotal||0}}条</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="title">本周</div>
|
|
|
+ <div class="num">校招投递简历数 {{schoolWeek||0}}条</div>
|
|
|
+ <div class="num">社招投递简历数 {{clubWeek||0}}条</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <div class="title">本周</div>
|
|
|
- <div class="num">校招投递简历数 {{schoolWeek||0}}条</div>
|
|
|
- <div class="num">社招投递简历数 {{clubWeek||0}}条</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="flex">
|
|
|
- <div ref="mychart2" :style="{width: '75%', height: '300px'}"></div>
|
|
|
+ <div ref="mychart2" :style="{width: '100%', height: '600px', marginTop: '30px'}"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <el-table :data="resumeTable" border style="width: 100%">
|
|
|
+ <el-table-column prop="name" label="渠道名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="0" label="已收到简历">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[0] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="1" label="已通过建立">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[1] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="2" label="已淘汰建立">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[2] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="3" label="待定简历">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[3] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="title">简历状态统计</div>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="address" label="职位">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="0" label="51job">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="1" label="智联">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="2" label="58同城">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="3" label="平台">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="title">简历投递职位统计</div>
|
|
|
+ <div ref="mychart3" :style="{width: '100%', height: '600px', marginTop: '30px'}"></div>
|
|
|
+ <el-table :data="interviewTable" border style="width: 100%">
|
|
|
+ <el-table-column prop="name" label="渠道名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="0" label="已收到简历">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[0] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="1" label="已通过建立">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[1] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="2" label="已淘汰建立">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[2] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="3" label="待定简历">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row[3] || 0}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="title">简历状态统计</div>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="address" label="职位">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date" label="51job">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="date" label="智联">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="58同城">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="平台">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="title">简历投递职位统计</div>
|
|
|
+</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -39,11 +116,19 @@ export default {
|
|
|
clubTotal: 0,
|
|
|
schoolTotal: 0,
|
|
|
clubWeek: 0,
|
|
|
- schoolWeek: 0
|
|
|
+ schoolWeek: 0,
|
|
|
+ platformList: ['51job', '智联', '58同城', '平台'],
|
|
|
+ resumeList: [],
|
|
|
+ resumeTable: [],
|
|
|
+ interviewList: [],
|
|
|
+ interviewTable: [],
|
|
|
+ tableData: []
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
this.queryData()
|
|
|
+ this.queryData2()
|
|
|
+ this.queryData3()
|
|
|
},
|
|
|
methods: {
|
|
|
queryData () {
|
|
|
@@ -76,6 +161,33 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+ queryData2 () {
|
|
|
+ this.$api
|
|
|
+ .post('/chart/getResumeTotal', {
|
|
|
+ reqdata: {}
|
|
|
+ }).then(res => {
|
|
|
+ this.resumeList = res.list
|
|
|
+ this.resumeTable = res.list.map((item, index) => {
|
|
|
+ item.name = this.platformList[index]
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ console.log((this.resumeList[0]))
|
|
|
+ this.initChart2()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryData3 () {
|
|
|
+ this.$api
|
|
|
+ .post('/chart/getInterviewTotal', {
|
|
|
+ reqdata: {}
|
|
|
+ }).then(res => {
|
|
|
+ this.interviewList = res.list
|
|
|
+ this.interviewTable = res.list.map((item, index) => {
|
|
|
+ item.name = this.platformList[index]
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.initChart3()
|
|
|
+ })
|
|
|
+ },
|
|
|
initChart () {
|
|
|
let myChart = echarts.init(this.$refs.mychart1)
|
|
|
myChart.setOption({
|
|
|
@@ -111,40 +223,394 @@ export default {
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '校招投递简历',
|
|
|
- type: 'line',
|
|
|
- data: this.schoolRecruit
|
|
|
+ series: [{
|
|
|
+ name: '校招投递简历',
|
|
|
+ type: 'line',
|
|
|
+ data: this.schoolRecruit
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '社招投递简历',
|
|
|
+ type: 'line',
|
|
|
+ data: this.clubRecruit
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ setTimeout(function () {
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize()
|
|
|
+ }
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ initChart2 () {
|
|
|
+ let myChart = echarts.init(this.$refs.mychart2)
|
|
|
+ let app = {}
|
|
|
+ var posList = [
|
|
|
+ 'left', 'right', 'top', 'bottom',
|
|
|
+ 'inside',
|
|
|
+ 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
|
|
|
+ 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
|
|
|
+ ]
|
|
|
+
|
|
|
+ app.configParameters = {
|
|
|
+ rotate: {
|
|
|
+ min: -90,
|
|
|
+ max: 90
|
|
|
+ },
|
|
|
+ align: {
|
|
|
+ options: {
|
|
|
+ left: 'left',
|
|
|
+ center: 'center',
|
|
|
+ right: 'right'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ verticalAlign: {
|
|
|
+ options: {
|
|
|
+ top: 'top',
|
|
|
+ middle: 'middle',
|
|
|
+ bottom: 'bottom'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ position: {
|
|
|
+ options: echarts.util.reduce(posList, function (map, pos) {
|
|
|
+ map[pos] = pos
|
|
|
+ return map
|
|
|
+ }, {})
|
|
|
+ },
|
|
|
+ distance: {
|
|
|
+ min: 0,
|
|
|
+ max: 100
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ app.config = {
|
|
|
+ rotate: 90,
|
|
|
+ align: 'left',
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ position: 'insideBottom',
|
|
|
+ distance: 15,
|
|
|
+ onChange: function () {
|
|
|
+ var labelOption = {
|
|
|
+ normal: {
|
|
|
+ rotate: app.config.rotate,
|
|
|
+ align: app.config.align,
|
|
|
+ verticalAlign: app.config.verticalAlign,
|
|
|
+ position: app.config.position,
|
|
|
+ distance: app.config.distance
|
|
|
+ }
|
|
|
+ }
|
|
|
+ myChart.setOption({
|
|
|
+ series: [{
|
|
|
+ label: labelOption
|
|
|
+ }, {
|
|
|
+ label: labelOption
|
|
|
+ }, {
|
|
|
+ label: labelOption
|
|
|
+ }, {
|
|
|
+ label: labelOption
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let labelOption = {
|
|
|
+ show: true,
|
|
|
+ position: app.config.position,
|
|
|
+ distance: app.config.distance,
|
|
|
+ align: app.config.align,
|
|
|
+ verticalAlign: app.config.verticalAlign,
|
|
|
+ rotate: app.config.rotate,
|
|
|
+ formatter: '{c} {name|{a}}',
|
|
|
+ fontSize: 16,
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ textBorderColor: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '招聘渠道分析：简历管理'
|
|
|
+ },
|
|
|
+ color: ['#003366', '#006699', '#4cabce', '#e5323e'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['已收到', '已通过', '已淘汰', '待定']
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: true,
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'right',
|
|
|
+ top: 'center',
|
|
|
+ feature: {
|
|
|
+ mark: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ dataView: {
|
|
|
+ show: true,
|
|
|
+ readOnly: false
|
|
|
+ },
|
|
|
+ magicType: {
|
|
|
+ show: true,
|
|
|
+ type: ['line', 'bar', 'stack', 'tiled']
|
|
|
+ },
|
|
|
+ restore: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ saveAsImage: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
},
|
|
|
- {
|
|
|
- name: '社招投递简历',
|
|
|
- type: 'line',
|
|
|
- data: this.clubRecruit
|
|
|
+ data: this.platformList
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value'
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '已收到',
|
|
|
+ type: 'bar',
|
|
|
+ barGap: 0,
|
|
|
+ label: labelOption,
|
|
|
+ data: [this.resumeList[0]['0'] || 0, this.resumeList[1]['0'] || 0, this.resumeList[2]['0'] || 0, this.resumeList[3]['0'] || 0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已通过',
|
|
|
+ type: 'bar',
|
|
|
+ label: labelOption,
|
|
|
+ data: [this.resumeList[0]['1'] || 0, this.resumeList[1]['1'] || 0, this.resumeList[2]['1'] || 0, this.resumeList[3]['1'] || 0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已淘汰',
|
|
|
+ type: 'bar',
|
|
|
+ label: labelOption,
|
|
|
+ data: [this.resumeList[0]['2'] || 0, this.resumeList[1]['2'] || 0, this.resumeList[2]['2'] || 0, this.resumeList[3]['2'] || 0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待定',
|
|
|
+ type: 'bar',
|
|
|
+ label: labelOption,
|
|
|
+ data: [this.resumeList[0]['3'] || 0, this.resumeList[1]['3'] || 0, this.resumeList[2]['3'] || 0, this.resumeList[3]['3'] || 0]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ myChart.setOption(option)
|
|
|
+ setTimeout(function () {
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize()
|
|
|
+ }
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ initChart3 () {
|
|
|
+ let myChart = echarts.init(this.$refs.mychart3)
|
|
|
+ let app = {}
|
|
|
+ var posList = [
|
|
|
+ 'left', 'right', 'top', 'bottom',
|
|
|
+ 'inside',
|
|
|
+ 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
|
|
|
+ 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
|
|
|
+ ]
|
|
|
+
|
|
|
+ app.configParameters = {
|
|
|
+ rotate: {
|
|
|
+ min: -90,
|
|
|
+ max: 90
|
|
|
+ },
|
|
|
+ align: {
|
|
|
+ options: {
|
|
|
+ left: 'left',
|
|
|
+ center: 'center',
|
|
|
+ right: 'right'
|
|
|
}
|
|
|
+ },
|
|
|
+ verticalAlign: {
|
|
|
+ options: {
|
|
|
+ top: 'top',
|
|
|
+ middle: 'middle',
|
|
|
+ bottom: 'bottom'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ position: {
|
|
|
+ options: echarts.util.reduce(posList, function (map, pos) {
|
|
|
+ map[pos] = pos
|
|
|
+ return map
|
|
|
+ }, {})
|
|
|
+ },
|
|
|
+ distance: {
|
|
|
+ min: 0,
|
|
|
+ max: 100
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ app.config = {
|
|
|
+ rotate: 90,
|
|
|
+ align: 'left',
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ position: 'insideBottom',
|
|
|
+ distance: 15,
|
|
|
+ onChange: function () {
|
|
|
+ var labelOption = {
|
|
|
+ normal: {
|
|
|
+ rotate: app.config.rotate,
|
|
|
+ align: app.config.align,
|
|
|
+ verticalAlign: app.config.verticalAlign,
|
|
|
+ position: app.config.position,
|
|
|
+ distance: app.config.distance
|
|
|
+ }
|
|
|
+ }
|
|
|
+ myChart.setOption({
|
|
|
+ series: [{
|
|
|
+ label: labelOption
|
|
|
+ }, {
|
|
|
+ label: labelOption
|
|
|
+ }, {
|
|
|
+ label: labelOption
|
|
|
+ }, {
|
|
|
+ label: labelOption
|
|
|
+ }]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let labelOption = {
|
|
|
+ show: true,
|
|
|
+ position: app.config.position,
|
|
|
+ distance: app.config.distance,
|
|
|
+ align: app.config.align,
|
|
|
+ verticalAlign: app.config.verticalAlign,
|
|
|
+ rotate: app.config.rotate,
|
|
|
+ formatter: '{c} {name|{a}}',
|
|
|
+ fontSize: 16,
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ textBorderColor: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let {
|
|
|
+ interviewList
|
|
|
+ } = this
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '招聘渠道分析：面试管理'
|
|
|
+ },
|
|
|
+ color: ['#003366', '#006699', '#4cabce', '#e5323e'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['已通知', '已通过', '已淘汰', '待定']
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ show: true,
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'right',
|
|
|
+ top: 'center',
|
|
|
+ feature: {
|
|
|
+ mark: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ dataView: {
|
|
|
+ show: true,
|
|
|
+ readOnly: false
|
|
|
+ },
|
|
|
+ magicType: {
|
|
|
+ show: true,
|
|
|
+ type: ['line', 'bar', 'stack', 'tiled']
|
|
|
+ },
|
|
|
+ restore: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ saveAsImage: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: this.platformList
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value'
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '已通知',
|
|
|
+ type: 'bar',
|
|
|
+ barGap: 0,
|
|
|
+ label: labelOption,
|
|
|
+ data: [interviewList[0]['0'] || 0, interviewList[1]['0'] || 0, interviewList[2]['0'] || 0, interviewList[3]['0'] || 0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已通过',
|
|
|
+ type: 'bar',
|
|
|
+ label: labelOption,
|
|
|
+ data: [interviewList[0]['1'] || 0, interviewList[1]['1'] || 0, interviewList[2]['1'] || 0, interviewList[3]['1'] || 0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '已淘汰',
|
|
|
+ type: 'bar',
|
|
|
+ label: labelOption,
|
|
|
+ data: [interviewList[0]['2'] || 0, interviewList[1]['2'] || 0, interviewList[2]['2'] || 0, interviewList[3]['2'] || 0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '待定',
|
|
|
+ type: 'bar',
|
|
|
+ label: labelOption,
|
|
|
+ data: [interviewList[0]['3'] || 0, interviewList[1]['3'] || 0, interviewList[2]['3'] || 0, interviewList[3]['3'] || 0]
|
|
|
+ }
|
|
|
]
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
+ myChart.setOption(option)
|
|
|
setTimeout(function () {
|
|
|
window.onresize = function () {
|
|
|
myChart.resize()
|
|
|
}
|
|
|
}, 200)
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .flex {
|
|
|
+.flex {
|
|
|
display: flex;
|
|
|
- }
|
|
|
- .flex1 {
|
|
|
+}
|
|
|
+
|
|
|
+.flex1 {
|
|
|
width: 200px;
|
|
|
margin-top: 00px;
|
|
|
margin-left: 80px;
|
|
|
- }
|
|
|
- .num {
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ margin: 8px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.num {
|
|
|
margin: 20px;
|
|
|
font-size: 14px;
|
|
|
- }
|
|
|
+}
|
|
|
</style>
|
