hr-admin/src/views/candidateManage/statistics.vue

<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-08-03 15:00:31
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-12 18:37:45
-->
<template>
<div>
    <el-card class="box-card">
        <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>
                <div>
                    <div class="title">本周</div>
                    <div class="num">校招投递简历数 {{schoolWeek||0}}条</div>
                    <div class="num">社招投递简历数 {{clubWeek||0}}条</div>
                </div>
            </div>
        </div>
    </el-card>
    <el-card class="box-card">
        <div class="flex">
            <div ref="mychart2" :style="{width: '100%', height: '600px', marginTop: '30px'}"></div>
        </div>
    </el-card>
    <el-table :data="resumeTable" border style="width: 95%;margin: 0 auto">
        <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: 95%;margin: 0 auto">
        <el-table-column prop="positionApplied" label="职位">
        </el-table-column>
        <el-table-column prop="job" label="51job">
        </el-table-column>
        <el-table-column prop="zhilian" label="智联">
        </el-table-column>
        <el-table-column prop="tongcheng" label="58同城">
        </el-table-column>
        <el-table-column prop="platform" label="平台">
        </el-table-column>
    </el-table>
    <div class="title">简历投递职位统计</div>
    <el-card class="box-card">
        <div ref="mychart3" :style="{width: '100%', height: '600px', marginTop: '30px'}"></div>
    </el-card>
    <el-table :data="interviewTable" border style="width: 95%;margin: 0 auto">
        <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="tableList" border style="width: 95%;margin: 0 auto">
        <el-table-column prop="positionApplied" label="职位">
        </el-table-column>
        <el-table-column prop="job" label="51job">
        </el-table-column>
        <el-table-column prop="zhilian" label="智联">
        </el-table-column>
        <el-table-column prop="tongcheng" label="58同城">
        </el-table-column>
        <el-table-column prop="platform" label="平台">
        </el-table-column>
    </el-table>
    <div class="title">面试者意向职位统计</div>
</div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      timeList: [],
      clubRecruit: [],
      schoolRecruit: [],
      clubTotal: 0,
      schoolTotal: 0,
      clubWeek: 0,
      schoolWeek: 0,
      platformList: ['51job', '智联', '58同城', '平台'],
      resumeList: [],
      resumeTable: [],
      interviewList: [],
      interviewTable: [],
      tableData: [],
      tableList: []
    }
  },
  mounted () {
    this.queryData()
    this.queryData2()
    this.queryData3()
    this.countResumeTotal()
    this.countInterviewTotal()
  },
  methods: {
    queryData () {
      this.$api
        .post('/chart/getResumeChart', {
          reqdata: {
            recruitType: 0
          }
        })
        .then((res) => {
          console.log(res)
          this.timeList = res.object.weekList || []
          this.clubRecruit = res.object.countList || []
          this.clubTotal = res.object.countTotal
          this.clubWeek = this.clubRecruit[this.clubRecruit.length - 1]
          this.$api
            .post('/chart/getResumeChart', {
              reqdata: {
                recruitType: 1
              }
            })
            .then((res) => {
              let arr = []
              let length = this.timeList.indexOf(res.object.weekList && res.object.weekList[0])
              arr.length = length === -1 ? 0 : length
              this.schoolRecruit = [...arr, ...(res.object.countList || [])]
              this.schoolTotal = res.object.countTotal
              // console.log(this.schoolTotal)
              this.schoolWeek = this.schoolRecruit[this.schoolRecruit.length - 1]
              this.initChart()
            })
        })
    },
    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()
        })
    },
    countResumeTotal () {
      this.$api
        .post('/chart/countResumeTotal', {
          reqdata: {}
        }).then(res => {
          this.tableData = res.list
        })
    },
    countInterviewTotal () {
      this.$api
        .post('/chart/countInterviewTotal', {
          reqdata: {}
        }).then(res => {
          this.tableList = res.list
        })
    },
    initChart () {
      let myChart = echarts.init(this.$refs.mychart1)
      myChart.setOption({
        title: {
          text: '简历投递信息'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['校招投递简历', '社招投递简历']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.timeList.map(item => item.substring(0, 10)),
          axisLabel: {
            interval: 0,
            rotate: -80
          }
        },
        yAxis: {
          type: 'value'
        },
        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 () {
          let 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
          },
          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 {
    display: flex;
}

.flex1 {
    width: 200px;
    margin-top: 00px;
    margin-left: 80px;
}

.title {
    margin: 8px;
    text-align: center;
    font-size: 16px;
}

.num {
    margin: 20px;
    font-size: 14px;
}

.box-card {
    margin: 10px;
}
</style>