proginn-frontend/pages/salary/_id.vue

<template>
  <div>
    <div class="wrapper pc" v-if="screenWidth > 960">
      <h1 class="title">{{city}}-{{job}}收入水平</h1>
      <div class="subtitle">{{city}}{{job}}平均工资：￥{{avg_salary}}/月，统计来自程序员客栈（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>
      <div class="title-wrapper">
        <h1 class="title">{{city}}-{{job}}收入水平</h1>
        <div class="subtitle">{{city}}{{job}}平均工资：￥{{avg_salary}}/月，统计来自程序员客栈（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">平均工资：￥{{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>
</template>

<script>
export default {
  head() {
    return {
      title: `${this.city}${this.job}月薪工资待遇查询，${this.city}企业招聘${this.job}费用查询-程序员客栈`,
      meta: [
        {
          name: "keywords",
          content: `${this.city}${this.job}工资,${this.city}${this.job}兼职工资,${this.city}企业${this.job}招聘费用`
        },
        {
          name: "description",
          content: `程序员客栈提供${this.city}${this.job}工资查询，让${this.city}${this.job}程序员能了解自身兼职价值，帮助${this.city}有${this.job}招聘需求的企业利用合理的费用找到合适的人才！`
        }
      ]
    };
  },
  data() {
    return {
      screenWidth: 0,
      job: "",
      city: "",
      avg_salary: 0,
      max_salary: 0,
      min_salary: 0,
      jobList: [],
      experience: [],
      allCitySalary: [],
      salaryRange: []
    };
  },
  async asyncData ({ $axios, req, res }) {
    // 请检查您是否在服务器端
    // 使用 req 和 res
    console.log(req)
    if (process.server) {
      const path = req.url
      const cityJob = path.split('/')[2]
      const city = cityJob.split('-')[0]
      const job = cityJob.split('-')[1].replace('c%23', 'c#')
      let params = {
        job: job,
        city: city
      };
      let res = await $axios.$post("/api/salary/search_info", params);

      const jobList = res.data.jobSort || [];
      const experience = res.data.experience || [];


      for (let i = 0; i < jobList.length; i++) {
        jobList[i].salary = parseInt(jobList[i].salary);
      }
      for (let i = 0; i < experience.length; i++) {
        experience[i].salary = parseInt(experience[i].salary);
      }
      return {
        job: res.data.info.job || '',
        city: res.data.info.city || '',
        avg_salary: res.data.info.avg_salary,
        max_salary: res.data.info.max_salary,
        min_salary: res.data.info.min_salary,
        jobList: jobList,
        experience: experience,
        allCitySalary: res.data.allCitySalary || [],
        salaryRange: res.data.salaryRange || [],
      }
    }

    return {}
  },
  mounted() {
    this.screenWidth = window.screen.width;
    this.$nextTick(() => {
      this.getData();
      // this.getRangeChart();
      // this.getIndustryChart();
      // this.getExperienceChart();
      // this.getEducationChart()
      // this.getCityChart()
    });
  },
  methods: {
    async getData() {
      // const path = window.location.pathname
      // const cityJob = path.split('/')[2]
      // this.city = cityJob.split('-')[0]
      // this.job = cityJob.split('-')[1]
      // let params = {
      //   job: this.job,
      //   city: this.city
      // };
      // let res = await this.$axios.$post("/api/salary/search_info", params);
      // this.job = res.data.info.job;
      // this.city = res.data.info.city;
      // 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;
      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();
    }
  }
};
</script>

<style lang="scss" scoped>
  .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: 0.54rem;
      margin-left: 0.3rem;
      line-height: 0.56rem;
      font-weight: 600;
      font-size: 0.4rem;
      color: #333333;
    }
    .subtitle {
      margin-top: 0.1rem;
      margin-left: 0.3rem;
      width: 7.04rem;
      line-height: 0.34rem;
      font-size: 0.24rem;
      color: #999999;
    }
    .module-wrapper {
      overflow: hidden;
      margin-top: 0.12rem;
      width: 100%;
      background-color: #ffffff;
    }
    .module-title {
      margin-top: 0.38rem;
      margin-left: 0.36rem;
      line-height: 0.44rem;
      font-weight: 600;
      font-size: 0.32rem;
      color: #000000;
    }
    .range-chart,
    .industry-chart,
    .experience-chart,
    .education-chart,
    .city-chart {
      margin-top: 0.38rem;
      margin-left: -0.4rem;
    }
    .average-title {
      margin-top: 0.38rem;
      margin-left: 0.36rem;
      line-height: 0.44rem;
      font-weight: 600;
      font-size: 0.32rem;
      color: #000000;
    }
    .average-subtitle {
      margin: 0.28rem auto 0;
      width: 6.76rem;
      line-height: 0.36rem;
      font-size: 0.24rem;
      color: #666666;
    }
    .average-img {
      margin: 0.94rem auto 0;
      display: block;
      width: 4.7rem;
      height: 2.7rem;
    }
    .module-list {
      margin-top: 0.34rem;
      margin-bottom: 0.4rem;
    }
    .module-item {
      display: flex;
      align-items: center;
    }
    .module-label {
      margin-left: 0.36rem;
      line-height: 0.64rem;
      font-weight: 500;
      font-size: 0.26rem;
      color: #000000;
    }
    .module-line {
      flex: 1;
      margin-left: 0.2rem;
      margin-right: 0.1rem;
      width: 4.44rem;
      border-bottom: 0.02rem dashed #bcbcbc;
    }
    .module-salary {
      margin-right: 0.3rem;
      line-height: 0.64rem;
      font-size: 0.24rem;
      color: #666666;
    }
  }
</style>