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-if="screenWidth > 0">
      <div class="title-wrapper">
        <div class="title">{{city}}-{{job}}收入水平</div>
        <div class="subtitle">杭州产品经理平均工资：￥66666/月，统计来自程序员客栈（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>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    head() {
      return {
        title: `${this.city}${this.job}月薪工资待遇查询，${this.city}企业招聘${this.city}费用查询-程序员客栈`,
        meta: [
          {
              name: "keywords",
              content: `${this.city}${this.job}工资,${this.city}${this.job}兼职工资,${this.city}企业${this.job}招聘费用`
          },
          {
              name: "descrption",
              content: `程序员客栈提供${this.city}${this.job}工资查询，让${this.city}${this.job}程序员能了解自身兼职价值，帮助${this.city}有${this.job}招聘需求的企业利用合理的费用找到合适的人才！`
          }
        ]
      };
    },
      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]
              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 {
                  host: req.headers.host,
                  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 || [],
                  screenWidth: 1366,
              }
          }

          return {}
      },
    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() {
        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>