proginn-frontend/pages/salary/detail.vue

<template>
  <div>
    <div class="wrapper pc" v-if="screenWidth > 960">
      <div class="title">{{city}}-{{job}}收入水平</div>
      <div class="subtitle">{{city}}{{job}}平均工资：￥{{avg_salary}}/月，取自23212份数据样本，较2018年，减少1.1%，统计来自程序员客栈（proginn.com）</div>
      <div class="content">
        <div class="module-wrapper">
          <div class="module-title">开发者薪资范围分布</div>
          <div id="range-chart" class="range-chart"></div>
        </div>
        <div class="module-wrapper">
          <div class="average-title">平均工资：￥{{avg_salary}}元/月</div>
          <div class="average-subtitle">最高为{{max_salary}}元/月，最低为{{min_salary}}元/月其中，平均工资为{{avg_salary}}元/月</div>
          <img class="average-img" src="@/assets/img/salary/average_salary.png" alt="">
        </div>
        <div class="module-wrapper">
          <div class="module-title">杭州其他岗位平均工资</div>
          <div id="industry-chart" class="industry-chart"></div>
        </div>
        <div class="module-wrapper">
          <div class="module-title">按工作经验统计</div>
          <div id="experience-chart" class="experience-chart"></div>
        </div>
        <!--        <div class="module-wrapper">-->
        <!--          <div class="module-title">按学历统计</div>-->
        <!--          <div id="education-chart" class="education-chart"></div>-->
        <!--        </div>-->
        <!--        <div class="module-wrapper">-->
        <!--          <div class="module-title">按各城市岗位需求统计</div>-->
        <!--          <div id="city-chart" class="city-chart"></div>-->
        <!--        </div>-->
        <div class="module-wrapper">
          <div class="module-title">全国城市{{job}}平均工资</div>
          <div class="module-list">
            <div class="module-item" v-for="citys in allCitySalary">
              <div class="module-label">{{citys.city}}</div>
              <div class="module-line"></div>
              <div class="module-salary">￥{{citys.salary}}元/月</div>
            </div>
          </div>
        </div>
        <div class="module-wrapper">
          <div class="module-title">{{city}}其他岗位平均工资</div>
          <div class="module-list">
            <div class="module-item" v-for="jobs in jobList">
              <div class="module-label">{{jobs.job}}</div>
              <div class="module-line"></div>
              <div class="module-salary">￥{{jobs.salary}}元/月</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="wrapper mobile" v-else-if="screenWidth > 0">
      <div class="title-wrapper">
        <div class="title">{{city}}-{{job}}收入水平</div>
        <div class="subtitle">杭州产品经理平均工资：￥66666/月，取自23212份数据样本，较2018年，减少1.1%，统计来自程序员客栈（proginn.com）</div>
      </div>
      <div class="module-wrapper">
        <div class="module-title">开发者薪资排行城市TOP10</div>
        <div id="range-chart" class="range-chart"></div>
      </div>
      <div class="module-wrapper">
        <div class="average-title">平均工资：￥13000元/月</div>
        <div class="average-subtitle">最高为16000元/月，最低为10000元/月其中，人工智能行业的产品经理平均工资最高达54363元/月</div>
        <img class="average-img" src="@/assets/img/salary/average_salary.png" alt="">
      </div>
      <div class="module-wrapper">
        <div class="module-title">杭州其他岗位平均工资</div>
        <div id="industry-chart" class="industry-chart"></div>
      </div>
      <div class="module-wrapper">
        <div class="module-title">按工作经验统计</div>
        <div id="experience-chart" class="experience-chart"></div>
      </div>
      <!--      <div class="module-wrapper">-->
      <!--        <div class="module-title">按学历统计</div>-->
      <!--        <div id="education-chart" class="education-chart"></div>-->
      <!--      </div>-->
      <!--      <div class="module-wrapper">-->
      <!--        <div class="module-title">按各城市岗位需求统计</div>-->
      <!--        <div id="city-chart" class="city-chart"></div>-->
      <!--      </div>-->
      <div class="module-wrapper">
        <div class="module-title">全国城市{{job}}平均工资</div>
        <div class="module-list">
          <div class="module-item" v-for="citys in allCitySalary">
            <div class="module-label">{{citys.city}}</div>
            <div class="module-line"></div>
            <div class="module-salary">￥{{citys.salary}}元/月</div>
          </div>
      </div>
      </div>
      <div class="module-wrapper">
        <div class="module-title">{{city}}其他岗位平均工资</div>
        <div class="module-list">
          <div class="module-item" v-for="jobs in jobList">
            <div class="module-label">{{jobs.job}}</div>
            <div class="module-line"></div>
            <div class="module-salary">￥{{jobs.salary}}元/月</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                screenWidth: 0,
                job:'',
                city:'',
                avg_salary:0,
                max_salary:0,
                min_salary:0,
                jobList:[],
                experience:[],
                allCitySalary:[],
                salaryRange:[]
            }
        },
        mounted() {
            this.screenWidth = window.screen.width
            this.$nextTick(()=>{
                this.getData();
                // this.getRangeChart();
                // this.getIndustryChart();
                // this.getExperienceChart();
                // this.getEducationChart()
                // this.getCityChart()
            })
        },
        methods: {
            async getData(){
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                this.job = decodeURI(vars[0].split("=")[1]).replace(/c%23/, "c#");
                this.city = decodeURI(vars[1].split("=")[1]);
                let params = {
                    job:this.job,
                    city:this.city
                };
                let res = await this.$axios.$post('/api/salary/search_info',params);
                this.avg_salary = res.data.info.avg_salary;
                this.max_salary = res.data.info.max_salary;
                this.min_salary = res.data.info.min_salary;
                this.jobList = res.data.jobSort;
                this.experience = res.data.experience;
                this.allCitySalary = res.data.allCitySalary;
                this.salaryRange = res.data.salaryRange;

                for (let i=0 ;i < this.jobList.length ;i++){
                    this.jobList[i].salary = parseInt(this.jobList[i].salary);
                }
                for (let i=0 ;i < this.experience.length ;i++){
                    this.experience[i].salary = parseInt(this.experience[i].salary);
                }
                const sortJob = this.jobList;
                const sortExperience = this.experience;
                const allSalaryRange = this.salaryRange;
                console.log('-------------------------------');
                console.log(allSalaryRange);
                const chart = new G2.Chart({
                    container: 'range-chart',
                    forceFit: true,
                    height: 300
                });
                chart.source(allSalaryRange, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }
                });
                chart.coord('theta', {
                    radius: 0.75
                });
                chart.tooltip({
                    showTitle: false,
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                });
                chart.intervalStack().position('percent').color('item').label('percent', {
                    formatter: function formatter(val, item) {
                        return item.point.item + ': ' + val;
                    }
                }).tooltip('item*percent', function(item, percent) {
                    percent = percent * 100 + '%';
                    return {
                        name: item,
                        value: percent
                    };
                }).style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
                chart.render();

                const chart1 = new G2.Chart({
                    container: 'industry-chart',
                    forceFit: true,
                    height: 300
                });
                chart1.source(sortJob);
                chart1.scale('salary', {
                    min: 0
                });
                chart1.scale('job', {
                    range: [0, 1]
                });
                chart1.tooltip({
                    crosshairs: {
                        type: 'line'
                    }
                });
                chart1.line().position('job*salary');
                chart1.point().position('job*salary').size(4).shape('circle').style({
                    stroke: '#fff',
                    lineWidth: 1
                });
                chart1.render();


                const chart2 = new G2.Chart({
                    container: 'experience-chart',
                    forceFit: true,
                    height: 300
                });
                chart2.source(sortExperience);
                chart2.scale('salary', {
                    min: 0
                });
                chart2.scale('experience', {
                    range: [0, 1]
                });
                chart2.tooltip({
                    crosshairs: {
                        type: 'line'
                    }
                });
                chart2.line().position('experience*salary');
                chart2.point().position('experience*salary').size(4).shape('circle').style({
                    stroke: '#fff',
                    lineWidth: 1
                });
                chart2.render();

            },
            getRangeChart() {
                const data = [{
                    item: '事例一',
                    count: 40,
                    percent: 0.4
                }, {
                    item: '事例二',
                    count: 21,
                    percent: 0.21
                }, {
                    item: '事例三',
                    count: 17,
                    percent: 0.17
                }, {
                    item: '事例四',
                    count: 13,
                    percent: 0.13
                }, {
                    item: '事例五',
                    count: 9,
                    percent: 0.09
                }];
                const chart = new G2.Chart({
                    container: 'range-chart',
                    forceFit: true,
                    height: 300
                });
                chart.source(data, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }
                });
                chart.coord('theta', {
                    radius: 0.75
                });
                chart.tooltip({
                    showTitle: false,
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                });
                chart.intervalStack().position('percent').color('item').label('percent', {
                    formatter: function formatter(val, item) {
                        return item.point.item + ': ' + val;
                    }
                }).tooltip('item*percent', function(item, percent) {
                    percent = percent * 100 + '%';
                    return {
                        name: item,
                        value: percent
                    };
                }).style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
                chart.render();
            },
            getIndustryChart() {
                const data = [{
                    industry: '行业一',
                    salary: 23000
                }, {
                    industry: '行业二',
                    salary: 18000
                }, {
                    industry: '行业三',
                    salary: 15000
                }, {
                    industry: '行业四',
                    salary: 13000
                }, {
                    industry: '行业五',
                    salary: 16000
                }];
                const chart = new G2.Chart({
                    container: 'industry-chart',
                    forceFit: true,
                    height: 300
                });
                chart.source(data);
                chart.scale('salary', {
                    min: 0
                });
                chart.scale('industry', {
                    range: [0, 1]
                });
                chart.tooltip({
                    crosshairs: {
                        type: 'line'
                    }
                });
                chart.line().position('industry*salary');
                chart.point().position('industry*salary').size(4).shape('circle').style({
                    stroke: '#fff',
                    lineWidth: 1
                });
                chart.render();
            },
            getExperienceChart() {
                const data = [{
                    experience: '第一年',
                    salary: 7887
                }, {
                    experience: '第二年',
                    salary: 9014
                }, {
                    experience: '第三年',
                    salary: 12394
                }, {
                    experience: '第四年',
                    salary: 13098
                }, {
                    experience: '第五年',
                    salary: 29295
                }];
                const chart = new G2.Chart({
                    container: 'experience-chart',
                    forceFit: true,
                    height: 300
                });
                chart.source(data);
                chart.scale('salary', {
                    min: 0
                });
                chart.scale('experience', {
                    range: [0, 1]
                });
                chart.tooltip({
                    crosshairs: {
                        type: 'line'
                    }
                });
                chart.line().position('experience*salary');
                chart.point().position('experience*salary').size(4).shape('circle').style({
                    stroke: '#fff',
                    lineWidth: 1
                });
                chart.render();
            },
            // getEducationChart() {
            //   const data = [{
            //     education: '高中',
            //     salary: 7887
            //   }, {
            //     education: '大专',
            //     salary: 9014
            //   }, {
            //     education: '本科',
            //     salary: 12394
            //   }, {
            //     education: '硕士',
            //     salary: 13098
            //   }, {
            //     education: '博士',
            //     salary: 29295
            //   }];
            //   const chart = new G2.Chart({
            //     container: 'education-chart',
            //     forceFit: true,
            //     height: 300
            //   });
            //   chart.source(data);
            //   chart.scale('salary', {
            //     min: 0
            //   });
            //   chart.scale('education', {
            //     range: [0, 1]
            //   });
            //   chart.tooltip({
            //     crosshairs: {
            //       type: 'line'
            //     }
            //   });
            //   chart.line().position('education*salary');
            //   chart.point().position('education*salary').size(4).shape('circle').style({
            //     stroke: '#fff',
            //     lineWidth: 1
            //   });
            //   chart.render();
            // },
            // getCityChart() {
            //   const data = [
            //     {
            //       city: '北京',
            //       salary: 23000
            //     }, {
            //       city: '上海',
            //       salary: 15000
            //     }, {
            //       city: '深圳',
            //       salary: 18000
            //     }, {
            //       city: '杭州',
            //       salary: 13000
            //     }, {
            //       city: '武汉',
            //       salary: 16000
            //     }, {
            //       city: '长沙',
            //       salary: 10000
            //     }, {
            //       city: '成都',
            //       salary: 17000
            //     }, {
            //       city: '广州',
            //       salary: 14000
            //     }, {
            //       city: '南京',
            //       salary: 10000
            //     }, {
            //       city: '苏州',
            //       salary: 24000
            //     }
            //   ]
            //   const chart = new G2.Chart({
            //     container: 'city-chart',
            //     forceFit: true,
            //     height: 300
            //   });
            //   chart.source(data);
            //   chart.scale('salary', {
            //     min: 0
            //   });
            //   chart.scale('city', {
            //     range: [0, 1]
            //   });
            //   chart.tooltip({
            //     crosshairs: {
            //       type: 'line'
            //     }
            //   });
            //   chart.line().position('city*salary');
            //   chart.point().position('city*salary').size(4).shape('circle').style({
            //     stroke: '#fff',
            //     lineWidth: 1
            //   });
            //   chart.render();
            // }
        }
    }
</script>

<style lang="scss" scope>
  .wrapper {
    overflow: hidden;
  }

  .main {
    margin: 0;
    width: 100%;
  }

  .pc {
    margin: 10px auto;
    padding-bottom: 36px;
    width: 1000px;
    background-color: #ffffff;
    .title {
      margin-top: 30px;
      margin-left: 18px;
      line-height: 28px;
      font-weight: 600;
      font-size: 20px;
      color: #333333;
    }
    .subtitle {
      margin-top: 7px;
      margin-left: 18px;
      line-height: 17px;
      font-size: 12px;
      color: #999999;
    }
    .content {
      margin-top: 51px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    .module-wrapper {
      overflow: hidden;
      width: 480px;
      min-height: 366px;
      border: 1px solid #EBEBEB;
    }
    .module-title {
      margin-top: 22px;
      margin-left: 31px;
      line-height: 25px;
      font-weight: 600;
      font-size: 18px;
      color: #000000;
    }
    .range-chart, .industry-chart, .experience-chart, .education-chart, .city-chart {
      margin-top: 38px;
      margin-left: -20px;
    }
    .average-title {
      margin-top: 51px;
      line-height: 28px;
      text-align: center;
      font-weight: 600;
      font-size: 20px;
      color: #000000;
    }
    .average-subtitle {
      margin: 9px auto 0;
      width: 422px;
      line-height: 18px;
      font-size: 13px;
      color: #666666;
    }
    .average-img {
      margin: 50px auto 0;
      display: block;
      width: 235px;
      height: 135px;
    }
    .module-list {
      margin-top: 24px;
      margin-bottom: 10px;
    }
    .module-item {
      display: flex;
      align-items: center;
    }
    .module-label {
      margin-left: 25px;
      line-height: 32px;
      font-weight: 500;
      font-size: 13px;
      color: #000000;
    }
    .module-line {
      flex: 1;
      margin-left: 13px;
      margin-right: 5px;
      border-bottom: 1px dashed #BCBCBC;
    }
    .module-salary {
      margin-right: 23px;
      line-height: 32px;
      font-size: 12px;
      color: #666666;
    }
  }

  .mobile {
    .title-wrapper {
      overflow: hidden;
      width: 100%;
      height: 2.38rem;
      background-color: #ffffff;
    }
    .title {
      margin-top: .54rem;
      margin-left: .3rem;
      line-height: .56rem;
      font-weight: 600;
      font-size: .4rem;
      color: #333333;
    }
    .subtitle {
      margin-top: .1rem;
      margin-left: .3rem;
      width: 7.04rem;
      line-height: .34rem;
      font-size: .24rem;
      color: #999999;
    }
    .module-wrapper {
      overflow: hidden;
      margin-top: .12rem;
      width: 100%;
      background-color: #ffffff;
    }
    .module-title {
      margin-top: .38rem;
      margin-left: .36rem;
      line-height: .44rem;
      font-weight: 600;
      font-size: .32rem;
      color: #000000;
    }
    .range-chart, .industry-chart, .experience-chart, .education-chart, .city-chart {
      margin-top: .38rem;
      margin-left: -.4rem;
    }
    .average-title {
      margin-top: .38rem;
      margin-left: .36rem;
      line-height: .44rem;
      font-weight: 600;
      font-size: .32rem;
      color: #000000;
    }
    .average-subtitle {
      margin: .28rem auto 0;
      width: 6.76rem;
      line-height: .36rem;
      font-size: .24rem;
      color: #666666;
    }
    .average-img {
      margin: .94rem auto 0;
      display: block;
      width: 4.7rem;
      height: 2.7rem;
    }
    .module-list {
      margin-top: .34rem;
      margin-bottom: .4rem;
    }
    .module-item {
      display: flex;
      align-items: center;
    }
    .module-label {
      margin-left: .36rem;
      line-height: .64rem;
      font-weight: 500;
      font-size: .26rem;
      color: #000000;
    }
    .module-line {
      flex: 1;
      margin-left: .2rem;
      margin-right: .1rem;
      width: 4.44rem;
      border-bottom: .02rem dashed #BCBCBC;
    }
    .module-salary {
      margin-right: .3rem;
      line-height: .64rem;
      font-size: .24rem;
      color: #666666;
    }
  }
</style>