front/src/views/career/plan/components/major-introduce-job.vue

<template>
  <div>
    <div v-if="prospects">
      <div v-if="prospects.jobDirection" class="desc-item">
        <p class="format-tit">就业方向</p>
        <div class="f-666 f14" v-html="prospects.jobDirection" />
      </div>
      <div v-if="reverseSalary.length" class="desc-item">
        <p class="format-tit">平均薪酬(毕业年限) <span
          class="f-333 f14 ml20"
        >{{
          `平均薪资:${reverseSalary.length ? reverseSalary[0].value || '-' : '-'}`
        }}</span>
        </p>
        <div class="f-666 f14">
          <el-row :gutter="10">
            <el-col :span="12">
              <mx-chart :options="chartSalary" height="240px" />
            </el-col>
            <el-col style="height: 100%" :span="12">
              <el-row :gutter="40" type="flex" style="flex-wrap: wrap">
                <el-col v-for="(item,index) in reverseSalary" :key="index" :span="12" class="f16">
                  <el-row class="format-job-wrap">
                    <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
                    <el-col :span="15" class="f-333">{{ item.name }}</el-col>
                    <el-col :span="6" class="f-666  text-right f14">{{ item.value || '-' }}</el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-row :gutter="10" type="flex">
        <el-col v-if="prospects.vocationalDistribution.length" :span="8">
          <div class="desc-item">
            <p class="format-tit">主要职业分布</p>
            <div class="f-666 f14">
              <mx-chart :options="occupation" height="200px" />
              <el-collapse accordion>
                <el-collapse-item v-for="desc in prospects.vocationalDistribution" :key="desc.name">
                  <template slot="title">
                    <div style="display: flex;justify-content: space-between;width: 100%;">
                      <span class="f-active">{{ desc.name }}</span>
                      <span class="f-red">{{ desc.value }}%</span>
                    </div>
                  </template>
                  <div>{{ desc.expands }}</div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </el-col>
        <el-col v-if="prospects.industryDistribution.length" :span="8">
          <div class="desc-item">
            <p class="format-tit">主要行业分布</p>
            <div class="f-666 f14">
              <mx-chart :options="industry" height="200px" />
              <el-row>
                <el-col v-for="(item,index) in prospects.industryDistribution" :key="index" :span="24" class="f16">
                  <el-row class="format-job-wrap">
                    <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
                    <el-col :title="item.name" :span="18" class="f-333  text-ellipsis">{{ item.name }}
                    </el-col>
                    <el-col :span="3" class="f-red  text-right f14">{{ item.value }}%</el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col v-if="prospects.jobRegionDistribution.length" :span="8">
          <div class="desc-item">
            <p class="format-tit">主要就业地区分布</p>
            <div class="f-666 f14">
              <mx-chart :options="jobAddress" height="200px" />
              <el-row>
                <el-col v-for="(item,index) in prospects.jobRegionDistribution" :key="index" :span="24" class="f16">
                  <el-row class="format-job-wrap">
                    <el-col :span="3" class="f18 text-center f-666">{{ index + 1 }}</el-col>
                    <el-col :span="18" class="f-333 text-ellipsis">{{ item.name }}</el-col>
                    <el-col :span="3" class="f-red  text-right f14">{{ item.value }}%</el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="prospects.description.length" :gutter="10" class="f-12 f-666">
        <p><i class="el-icon mr5 f-16 el-icon-warning f-active" />数据说明</p>
        <p v-for="(desc,index) in prospects.description" :key="index">
          {{ index + 1 }}、 {{ desc }}
        </p>
      </el-row>
    </div>
    <div v-if="isEmpty">
      暂无数据
    </div>
  </div>
</template>

<script>
import config from '@/common/MxConfig'
import MxChart from '@/components/MxChart/index'

export default {
  name: 'MajorIntroduceJob',
  components: { MxChart },
  props: ['prospects'],
  computed: {
    isEmpty() {
      return !this.prospects.jobDirection &&
        !this.reverseSalary.length &&
        !this.prospects.description.length &&
        !this.prospects.vocationalDistribution.length &&
        !this.prospects.industryDistribution.length &&
        !this.prospects.jobRegionDistribution.length
    },
    // 平均薪资趋势
    reverseSalary() {
      if (!this.prospects['averageSalary']) return []
      const averageSalary = this.deepClone(this.prospects.averageSalary)
      return averageSalary.reverse().splice(0, 10)
    },
    // 主要职业分布
    occupation() {
      if (!this.prospects.vocationalDistribution) return null
      const pieData = this.prospects.vocationalDistribution
      const options = {
        toolbox: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: [40, 60],
            label: {
              formatter: '{b}'
            },
            labelLine: {
              length2: 6,
              length: 5
            },
            data: pieData
          }
        ]
      }
      return options
    },
    // 主要行业分布
    industry() {
      if (!this.prospects.industryDistribution) return null
      const pieData = this.prospects.industryDistribution
      const options = {
        toolbox: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: [40, 60],
            label: {
              formatter: '{b}'
            },
            labelLine: {
              length2: 6,
              length: 5
            },
            data: pieData
          }
        ]
      }
      return options
    },
    // 主要就业地区分布
    jobAddress() {
      if (!this.prospects.jobRegionDistribution) return
      const pieData = this.prospects.jobRegionDistribution
      const options = {
        toolbox: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: [40, 60],
            label: {
              formatter: '{b}'
            },
            labelLine: {
              length2: 6,
              length: 5
            },
            data: pieData
          }
        ]
      }
      return options
    },
    chartSalary() {
      if (!this.prospects.averageSalary) return null
      const col = this.prospects.averageSalary.map(item => item.name + '年')
      const row = this.prospects.averageSalary.map(item => item.value)
      const options = {
        grid: {
          left: '2%',
          right: '2%',
          bottom: '3%',
          top: '14%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: col,
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            color: config.color.primary,
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            smooth: false,
            data: row
          }
        ]

      }
      return options
    }
  }
}
</script>

<style lang="scss">
@import "./major-detail-style.scss";
</style>