proginn-frontend/pages/salary/index.vue

<template>
  <div>
    <div class="wrapper pc" v-if="screenWidth > 960">
      <div class="header">
        <div class="title">查岗位薪资 就上程序员客栈</div>
        <div class="search-wrapper">
          <div class="search-content">
            <input type="text" @keyup.enter="search" v-model="searchJob" placeholder="请输入您需要查询的岗位名称，如c++软件工程师" class="search-input">
            <el-dropdown @command="handleCommand">
              <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 class="wrapper mobile" v-else-if="screenWidth > 0">
      <div class="header">
        <div class="title">查岗位薪资<br/>就上程序员客栈</div>
        <div class="search-wrapper">
          <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日，调查了全国38749756名开发者的工资数据后发现，上海开发者平均工资最高达￥97974元/月，Python开发者的平均工资最高达66666元/月，本数据仅供参考。</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 {
  data() {
    return {
      screenWidth: 0,
      cityChart : [],
      jobChart : [],
      jobList :[],
      city:'',
      citySalary:0,
      cityList:[],
      job:'',
      jobSalary:0,
      cityTick:0,
      jobTick:0,
      searchJob:'',
      searchCity:'杭州',
    }
  },
  mounted() {
    this.screenWidth = window.screen.width
    this.$nextTick(()=>{
        this.getData()
    })
  },
  methods: {
      async getData(){
          let res = await this.$axios.$post('/api/salary/index_info');

          this.cityChart = res.data.sortOfCity;
          this.jobChart = res.data.sortOfJob;
          this.jobList = res.data.allJobType;
          this.city = res.data.sortOfCity[0].city;
          this.citySalary = res.data.sortOfCity[0].salary;
          this.job = res.data.sortOfJob[0].job;
          this.jobSalary = res.data.sortOfJob[0].salary;
          this.cityTick = res.data.cityTick;
          this.jobTick = res.data.jobTick;
          this.cityList = res.data.cityList;

          console.log(this.cityList);

          for (let i=0 ;i < this.cityChart.length ;i++){
              this.cityChart[i].salary = parseInt(this.cityChart[i].salary);
          }
          for (let i=0 ;i < this.jobChart.length ;i++){
              this.jobChart[i].salary = parseInt(this.jobChart[i].salary);
          }

          //开发者薪资排行城市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()
      },
      handleCommand(command) {
          this.searchCity = command;
      },
      search(){
          if(this.searchJob.length === 0){
              this.$message('请输入查询岗位名称');
              return false;
          }
          this.searchJob = this.searchJob.replace(/c#/, "c%23");
          this.searchJob = this.searchJob.replace(/c\+\+*/, "c%24");
          this.$router.push('/salary/detail?job='+encodeURI(this.searchJob)+'&city='+encodeURI(this.searchCity));
      },
      inVal(val){
          this.searchJob = val;
      }
  }
}
</script>

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

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

.pc {
  .header {
    overflow: hidden;
    width: 100%;
    height: 450px;
    background-image: url('~@/assets/img/salary/background.png');
    background-size: 1920px 533px;
    background-repeat: no-repeat;
    background-position: top center;
  }

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

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

  .search-content {
    width: 578px;
    height: 53px;
    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: 0px 4px 4px 0px;
    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;
  }

}

.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: .92rem;
    text-align: center;
    font-weight: 600;
    font-size: .66rem;
    color: #FFFFFF;
  }

  .search-wrapper {
    margin-top: .66rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-content {
    width: 5.3rem;
    height: .85rem;
    border-radius: .06rem 0 0 .06rem;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
  }

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

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

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

  .search-city img {
    margin-left: .06rem;
    width: .2rem;
    height: .12rem;
  }

  .search-btn {
    width: 1.66rem;
    height: .85rem;
    border-radius: .06rem 0 0 .06rem;
    background-color: #147EFF;
    line-height: .85rem;
    text-align: center;
    font-weight:600;
    font-size: .32rem;
    color: #FFFFFF;
  }

  .hot-search {
    margin-top: .22rem;
    margin-left: .26rem;
    line-height: .34rem;
    font-weight: 500;
    font-size: .24rem;
    color: #FFFFFF;
  }

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

  .content {
    overflow: hidden;
  }

  .info {
    margin-bottom: .12rem;
    padding: .5rem .28rem .48rem;
    background-color: #ffffff;
    line-height: .44rem;
    font-size: .26rem;
    color: #666666;
  }

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

  .module-title {
    margin-top: .44rem;
    margin-left: .36rem;
    line-height: .44rem;
    font-weight: 600;
    font-size: .32rem;
    color: #000000;
  }

  .city-chart, .job-chart {
    margin: .48rem auto 0;
    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>