proginn-frontend/pages/salary/index.vue

<template>
  <div>
    <div class="wrapper pc" v-if="!mobile">
      <div class="header">
        <div class="bgImage">
          <img src="@/assets/img/salary/background.png" alt="">
        </div>
        <div class="topContent">
          <h1 class="title">查岗位薪资 就上程序员客栈</h1>
          <div class="search-wrapper">
            <el-select class="salary-job-search" style="margin-right:5px;width:500px;" @change="changeJob" v-model="searchJob" placeholder="请选择">
              <el-option
                v-for="item in jobList"
                :key="item.job"
                :label="item.job"
                :value="item.job_slug"
              ></el-option>
            </el-select>

            <el-select class="salary-city-search" style="margin-right:5px;width:100px;" v-model="searchCity" placeholder="请选择">
              <el-option
                v-for="item in cityList"
                :key="item.city"
                :label="item.city"
                :value="item.city_slug"
              ></el-option>
            </el-select>
            <div class="search-btn" @click="search" type="primary">查询</div>
          </div>
        </div>

      </div>
      <div class="content">
        <div
          class="info"
        >截至2019年9月6日，调查了全国的开发者的工资数据后发现，{{city}}开发者平均工资最高达￥{{citySalary}}元/月，{{job}}开发者的平均工资最高达{{jobSalary}}元/月，本数据仅供参考。</div>
        <div class="module-wrapper">
          <div class="module-title">开发者薪资排行城市TOP10</div>
          <div id="city-chart" class="city-chart"></div>
        </div>
        <div class="module-wrapper">
          <div class="module-title">开发者薪资岗位TOP10</div>
          <div id="job-chart" class="job-chart"></div>
        </div>
      </div>
    </div>
    <div class="wrapper mobile" v-else>
      <div class="header">
        <h1 class="title">
          查岗位薪资
          <br />就上程序员客栈
        </h1>
        <div class="search-wrapper">
          <el-select class="salary-job-search" style="margin-right:.1rem;width:3.75rem;" @change="changeJob" v-model="searchJob" placeholder="请选择">
            <el-option
              v-for="item in jobList"
              :key="item.job"
              :label="item.job"
              :value="item.job_slug"
            ></el-option>
          </el-select>

          <el-select class="salary-city-search" style="margin-right:.1rem;width:2rem;" v-model="searchCity" placeholder="请选择">
            <el-option
              v-for="item in cityList"
              :key="item.city"
              :label="item.city"
              :value="item.city_slug"
            ></el-option>
          </el-select>

          <div class="search-btn" @click="search" type="primary">查询</div>

          <!--          <div class="search-content">-->
          <!--            <input type="text" @keyup.enter="search" v-model="searchJob" placeholder="岗位名称，如c++软件工程师" class="search-input">-->
          <!--            <el-dropdown>-->
          <!--              <div class="search-city">-->
          <!--                <span>{{searchCity}}</span>-->
          <!--                <img src="@/assets/img/salary/icon_arrow_down.png" alt="">-->
          <!--              </div>-->
          <!--              <el-dropdown-menu slot="dropdown">-->
          <!--                <el-dropdown-item v-for="citys in cityList"  :command="citys.city">{{citys.city}}</el-dropdown-item>-->
          <!--              </el-dropdown-menu>-->
          <!--            </el-dropdown>-->
          <!--          </div>-->
          <!--          <div @click="search" class="search-btn">查询</div>-->
        </div>
        <!--        <div class="hot-search">热门搜索：<span style="display: inline-block;cursor: pointer;" v-for="jobType in jobList"><div @click="inVal(jobType.job)" >{{jobType.job}}</div></span></div>-->
      </div>
      <div class="content">
        <div
          class="info"
        >截至2019年9月6日，调查了全国的开发者的工资数据后发现，{{city}}开发者平均工资最高达￥{{citySalary}}元/月，{{job}}开发者的平均工资最高达{{jobSalary}}元/月，本数据仅供参考。</div>
        <div class="module-wrapper">
          <div class="module-title">开发者薪资排行城市TOP10</div>
          <div id="city-chart" class="city-chart"></div>
        </div>
        <div class="module-wrapper">
          <div class="module-title">开发者薪资岗位TOP10</div>
          <div id="job-chart" class="job-chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: "opacity_header",
  head() {
    return {
      title: "程序员月薪工资待遇查询,企业招聘程序员费用查询-程序员客栈",
      meta: [
        {
          name: "keywords",
          content: "程序员工资,程序员月薪,程序员待遇,企业招聘程序员费用"
        },
        {
          name: "description",
          content: "程序员客栈提供全国每个城市程序员岗位工资查询，帮助每一位程序员找到合适的工作，让每一个有程序员招聘需求的企业利用合适的费用找到合适的人才。"
        }
      ]
    };
  },
  data() {
    return {
      cityChart: [],
      jobChart: [],
      jobList: [],
      city: "",
      citySalary: 0,
      cityList: [],
      job: "",
      jobSalary: 0,
      cityTick: 0,
      jobTick: 0,
      searchJob: "",
      searchCity: ""
    };
  },
  async asyncData ({ $axios, req, res, app }) {
    // 请检查您是否在服务器端
    // 使用 req 和 res
    console.log(req)
    if (process.server) {
      let res = await $axios.$post("/api/salary/index_info");
      const cityChart = res.data.sortOfCity;
      const jobChart = res.data.sortOfJob;
      const jobList = res.data.allJobType;
      const city = res.data.sortOfCity[0].city;
      const citySalary = res.data.sortOfCity[0].salary;
      const job = res.data.sortOfJob[0].job;
      const jobSalary = res.data.sortOfJob[0].salary;
      const cityTick = res.data.cityTick;
      const jobTick = res.data.jobTick;
      const cityList = res.data.cityList;
      const searchJob = res.data.allJobType[0].job_slug;
      const searchCity = res.data.cityList[0].city_slug;

      for (let i = 0; i < cityChart.length; i++) {
        cityChart[i].salary = parseInt(cityChart[i].salary);
      }
      for (let i = 0; i < jobChart.length; i++) {
        jobChart[i].salary = parseInt(jobChart[i].salary);
      }
      return {
        cityChart,
        jobChart,
        jobList,
        city,
        citySalary,
        cityList,
        job,
        jobSalary,
        cityTick,
        jobTick,
        searchJob,
        searchCity,
        mobile: app.$deviceType.isMobile(),
      }
    }

    return {
      mobile: app.$deviceType.isMobile()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  methods: {
    async getData() {
      //开发者薪资排行城市TOP10
      const chart1 = new G2.Chart({
        container: "city-chart",
        forceFit: true,
        height: 400
      });
      chart1.source(this.cityChart);
      chart1.scale("salary", {
        tickInterval: this.cityTick
      });
      chart1.interval().position("city*salary");
      chart1.render();
      //开发者薪资岗位TOP10
      const chart2 = new G2.Chart({
        container: "job-chart",
        forceFit: true,
        height: 400
      });
      chart2.source(this.jobChart);
      chart2.scale("salary", {
        tickInterval: this.jobTick
      });
      chart2.interval().position("job*salary");
      chart2.render();
    },
    async changeJob() {
      let data = { job: this.searchJob };
      let res = await this.$axios.$post("/api/salary/search_city", data);
      this.cityList = res.data.cityList;
    },
    handleCommandJob(command) {
      this.searchJob = command;
    },
    handleCommand(command) {
      this.searchCity = command;
    },
    search() {
      if (this.searchJob.length === 0) {
        this.$message("请输入查询岗位名称");
        return false;
      }
      window.location.href = `/salary/${this.searchCity}-${this.searchJob}/`.replace('c#', 'c%23');
    },
    inVal(val) {
      this.searchJob = val;
    }
  }
};
</script>

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

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

.pc {
  position: relative;
  margin: -85px 0 0;
  width: 100%;
  .header {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 200px;

    .bgImage {
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .topContent {
      position: absolute;
      top: 85px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      width: 1000px;
      left: 50%;
      transform: translateX(-50%);
      height: calc(100% - 85px);

      .title {
        line-height: 53px;
        text-align: center;
        font-weight: 600;
        font-size: 38px;
        color: #ffffff;
      }

      .search-wrapper {
        margin: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .search-content {
        /*width: 578px;*/
        height: 43px;
        border-radius: 4px 0px 0px 4px;
        background-color: #ffffff;
        display: flex;
        align-items: center;
      }

      .search-input {
        flex: 1;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 16px;
        color: #999999;
      }

      .search-city {
        margin-right: 18px;
        display: flex;
        align-items: center;
      }

      .search-city span {
        line-height: 14px;
        font-weight: 600;
        font-size: 16px;
        color: #919aa7;
      }

      .search-city img {
        margin-left: 4px;
        width: 11px;
        height: 7px;
      }

      .search-btn {
        width: 104px;
        height: 53px;
        border-radius: 4px;
        background-color: #147eff;
        line-height: 53px;
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
        cursor: pointer;
      }

    }
  }


  .hot-search {
    margin: 15px auto 0;
    width: 700px;
    line-height: 20px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
  }

  .hot-search span {
    margin-right: 20px;
  }

  .content {
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
  }

  .info {
    margin: 40px auto 0;
    width: 807px;
    line-height: 26px;
    font-size: 15px;
    color: #666666;
  }

  .module-wrapper {
    margin: 50px auto 0;
    width: 1000px;
  }

  .module-title {
    margin-left: 47px;
    line-height: 25px;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
  }

  .city-chart,
  .job-chart {
    margin: 50px auto 0;
    width: 950px;
  }
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}

.mobile {
  .header {
    overflow: hidden;
    width: 100%;
    height: 6.5rem;
    background-image: url("~@/assets/img/salary/background.png");
    background-size: auto 6.5rem;
    background-repeat: no-repeat;
    background-position: top center;
  }

  .title {
    margin-top: 1.16rem;
    line-height: 0.92rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.66rem;
    color: #ffffff;
  }

  .search-wrapper {
    margin: 0.66rem 0.2rem 0rem 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-content {
    width: 5.3rem;
    height: 0.85rem;
    border-radius: 0.06rem 0 0 0.06rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
  }

  .search-input {
    flex: 1;
    padding-left: 0.22rem;
    padding-right: 0.22rem;
    font-size: 0.26rem;
    color: #999999;
  }

  .search-city {
    margin-right: 0.32rem;
    display: flex;
    align-items: center;
  }

  .search-city span {
    font-weight: 600;
    font-size: 0.26rem;
    color: #919aa7;
  }

  .search-city img {
    margin-left: 0.06rem;
    width: 0.2rem;
    height: 0.12rem;
  }

  .search-btn {
    width: 1.66rem;
    height: 0.85rem;
    border-radius: 0.06rem 0 0 0.06rem;
    background-color: #147eff;
    line-height: 0.85rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.32rem;
    color: #ffffff;
  }

  .hot-search {
    margin-top: 0.22rem;
    margin-left: 0.26rem;
    line-height: 0.34rem;
    font-weight: 500;
    font-size: 0.24rem;
    color: #ffffff;
  }

  .hot-search span {
    margin-right: 0.2rem;
  }

  .content {
    overflow: hidden;
  }

  .info {
    margin-bottom: 0.12rem;
    padding: 0.5rem 0.28rem 0.48rem;
    background-color: #ffffff;
    line-height: 0.44rem;
    font-size: 0.26rem;
    color: #666666;
  }

  .module-wrapper {
    overflow: hidden;
    background-color: #ffffff;
  }

  .module-title {
    margin-top: 0.44rem;
    margin-left: 0.36rem;
    line-height: 0.44rem;
    font-weight: 600;
    font-size: 0.32rem;
    color: #000000;
  }

  .city-chart,
  .job-chart {
    margin-top: 0.48rem;
    margin-left: -0.24rem;
    width: 100%;
  }

  .dropdown {
    //设置高度才能显示出滚动条 !important
    height: 300px;
    overflow: auto;
  }
  .dropdown::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #f5f5f5;
  }
  .dropdown::-webkit-scrollbar-track {
    //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }
}
</style>

<style>
  .pc .salary-job-search .el-input__inner {
    height: 53px;
  }
  .pc .salary-city-search .el-input__inner {
    height: 53px;
  }
  .mobile .salary-job-search .el-input__inner {
    height: .85rem;
  }
  .mobile .salary-city-search .el-input__inner {
    height: .85rem;
  }
</style>