驻场head

components/header.vue

@@ -40,6 +40,18 @@
           <el-dropdown-item>
             <a
               class="workstation"
+              :href="baseUrl+'/job'"
+              style="display: flex; align-items: center;"
+            >
+              <img
+                src="@/assets/img/header/present_job.png"
+                style="width: 24px;height: 24px;margin-right: 5px;"
+              />驻场招聘
+            </a>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <a
+              class="workstation"
               :href="baseUrl+'/type/partners?from=top_nav'"
               style="display: flex; align-items: center;"
             >

pages/salary/detail.vue

@@ -2,7 +2,7 @@
   <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="subtitle">{{city}}{{job}}平均工资：￥{{avg_salary}}/月，统计来自程序员客栈（proginn.com）</div>
       <div class="content">
         <div class="module-wrapper">
           <div class="module-title">开发者薪资范围分布</div>
@@ -10,17 +10,17 @@
         </div>
         <div class="module-wrapper">
           <div class="average-title">平均工资：￥{{avg_salary}}元/月</div>
-          <div class="average-subtitle">最高为{{max_salary}}元/月，最低为{{min_salary}}元/月其中，平均工资为{{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="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>-->
@@ -55,7 +55,7 @@
     <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 class="subtitle">杭州产品经理平均工资：￥66666/月，统计来自程序员客栈（proginn.com）</div>
       </div>
       <div class="module-wrapper">
         <div class="module-title">开发者薪资排行城市TOP10</div>
@@ -63,17 +63,17 @@
       </div>
       <div class="module-wrapper">
         <div class="average-title">平均工资：￥13000元/月</div>
-        <div class="average-subtitle">最高为16000元/月，最低为10000元/月其中，人工智能行业的产品经理平均工资最高达54363元/月</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="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>-->
@@ -139,6 +139,7 @@
                 let query = window.location.search.substring(1);
                 let vars = query.split("&");
                 this.job = decodeURI(vars[0].split("=")[1]).replace(/c%23/, "c#");
+                this.job = decodeURI(vars[0].split("=")[1]).replace(/c%24*/, "c++");
                 this.city = decodeURI(vars[1].split("=")[1]);
                 let params = {
                     job:this.job,
@@ -162,8 +163,6 @@
                 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,
@@ -250,245 +249,7 @@
                 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>

pages/salary/index.vue

@@ -5,24 +5,20 @@
         <div class="title">查岗位薪资 就上程序员客栈</div>
         <div class="search-wrapper">
           <div class="search-content">
-            <input type="text" v-model="searchJob" placeholder="请输入您需要查询的岗位名称，如Java" class="search-input">
+            <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 command="杭州">杭州</el-dropdown-item>
-                <el-dropdown-item command="北京">北京</el-dropdown-item>
-                <el-dropdown-item command="上海">上海</el-dropdown-item>
-                <el-dropdown-item command="广州">广州</el-dropdown-item>
-                <el-dropdown-item command="深圳">深圳</el-dropdown-item>
+                <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  @click="inVal" style="display: inline-block;cursor: pointer;" v-for="jobType in jobList">{{jobType.job}}</span></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>
@@ -41,24 +37,20 @@
         <div class="title">查岗位薪资<br/>就上程序员客栈</div>
         <div class="search-wrapper">
           <div class="search-content">
-            <input type="text" v-model="searchJob" placeholder="岗位名称，如Java" class="search-input">
+            <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 command="杭州">杭州</el-dropdown-item>
-                <el-dropdown-item command="北京">北京</el-dropdown-item>
-                <el-dropdown-item command="上海">上海</el-dropdown-item>
-                <el-dropdown-item command="广州">广州</el-dropdown-item>
-                <el-dropdown-item command="深圳">深圳</el-dropdown-item>
+                <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 @click="inVal" style="display: inline-block;cursor: pointer;" v-for="jobType in jobList">{{jobType.job}}</span></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>
@@ -85,6 +77,7 @@ export default {
       jobList :[],
       city:'',
       citySalary:0,
+      cityList:[],
       job:'',
       jobSalary:0,
       cityTick:0,
@@ -112,7 +105,9 @@ export default {
           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);
@@ -155,10 +150,11 @@ export default {
               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.explicitOriginalTarget.innerText;
+          this.searchJob = val;
       }
   }
 }
@@ -295,6 +291,7 @@ export default {
     margin: 50px auto 0;
     width: 950px;
   }
+
 }
 
 .mobile {
@@ -415,5 +412,23 @@ export default {
     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>