|
|
@@ -56,15 +56,15 @@
|
|
|
<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 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">平均工资：￥13000元/月</div>
|
|
|
- <div class="average-subtitle">最高为16000元/月，最低为10000元/月,其中，人工智能行业的产品经理平均工资最高达54363元/月</div>
|
|
|
+ <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">-->
|
|
|
@@ -108,180 +108,220 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- head() {
|
|
|
- return {
|
|
|
- title: `${this.city}${this.job}月薪工资待遇查询，【城市】企业招聘【岗位】费用查询-程序员客栈`,
|
|
|
- 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}招聘需求的企业利用合理的费用找到合适的人才！`
|
|
|
- }
|
|
|
- ]
|
|
|
+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: "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].replace('c%23', 'c#')
|
|
|
+ let params = {
|
|
|
+ job: job,
|
|
|
+ city: city
|
|
|
};
|
|
|
- },
|
|
|
- data() {
|
|
|
+ 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 {
|
|
|
- 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 || [];
|
|
|
+ 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 || [],
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- 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);
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
- 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;
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
- chart.coord("theta", {
|
|
|
- radius: 0.75
|
|
|
+ })
|
|
|
+ .tooltip("item*percent", function(item, percent) {
|
|
|
+ percent = percent * 100 + "%";
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ value: percent
|
|
|
+ };
|
|
|
+ })
|
|
|
+ .style({
|
|
|
+ lineWidth: 1,
|
|
|
+ stroke: "#fff"
|
|
|
});
|
|
|
- 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();
|
|
|
+ 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 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();
|
|
|
- }
|
|
|
+ // 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>
|
wanyongkang
lushuncheng