|
|
@@ -178,12 +178,39 @@
|
|
|
</index-card>
|
|
|
<br />
|
|
|
</basic-container>
|
|
|
+ <basic-container>
|
|
|
+ <index-card
|
|
|
+ title="人均月工资对比走势图"
|
|
|
+ iconName="el-icon-s-fold"
|
|
|
+ style="height:500px;margin-bottom: 30px"
|
|
|
+ >
|
|
|
+ <div slot="select">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="annual4"
|
|
|
+ type="year"
|
|
|
+ size="mini"
|
|
|
+ placeholder="选择年"
|
|
|
+ value-format="yyyy"
|
|
|
+ style="margin-right:10px"
|
|
|
+ @change="getsalaryAverage"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div slot="content" style="height:450px" id="commoDity3"></div>
|
|
|
+ </index-card>
|
|
|
+ <br />
|
|
|
+ </basic-container>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getYearDate } from "@/util/date";
|
|
|
-import { salaryStatistics, salaryData, salaryDataChain } from "@/api/wel";
|
|
|
+import {
|
|
|
+ salaryStatistics,
|
|
|
+ salaryData,
|
|
|
+ salaryDataChain,
|
|
|
+ salaryAverage
|
|
|
+} from "@/api/wel";
|
|
|
import { mapGetters } from "vuex";
|
|
|
import indexCard from "../components/card.vue";
|
|
|
import butCard from "../components/butCard.vue";
|
|
|
@@ -208,9 +235,14 @@ export default {
|
|
|
annual: "",
|
|
|
annual2: "",
|
|
|
annual3: "",
|
|
|
+ annual4: "",
|
|
|
salaryType: "",
|
|
|
salaryType2: "",
|
|
|
salaryType3: "",
|
|
|
+ salaryType4: "",
|
|
|
+ xxList: [],
|
|
|
+ czList: [],
|
|
|
+ gzList: [],
|
|
|
isHeight: {},
|
|
|
options: [
|
|
|
{
|
|
|
@@ -251,7 +283,7 @@ export default {
|
|
|
// click: function(item) {
|
|
|
// // alert(JSON.stringify(item));
|
|
|
// },
|
|
|
- title: "工资总额",
|
|
|
+ title: "年工资总额",
|
|
|
count: 0,
|
|
|
decimals: 2,
|
|
|
icon: "el-icon-tickets"
|
|
|
@@ -273,7 +305,7 @@ export default {
|
|
|
// click: function(item) {
|
|
|
// // alert(JSON.stringify(item));
|
|
|
// },
|
|
|
- title: "人均工资",
|
|
|
+ title: "年人均工资",
|
|
|
count: 0,
|
|
|
decimals: 2,
|
|
|
icon: "el-icon-s-finance"
|
|
|
@@ -295,7 +327,7 @@ export default {
|
|
|
// click: function(item) {
|
|
|
// // alert(JSON.stringify(item));
|
|
|
// },
|
|
|
- title: "保险总额",
|
|
|
+ title: "年保险总额",
|
|
|
count: 0,
|
|
|
decimals: 2,
|
|
|
icon: "el-icon-s-cooperation"
|
|
|
@@ -306,7 +338,7 @@ export default {
|
|
|
// click: function(item) {
|
|
|
// // alert(JSON.stringify(item));
|
|
|
// },
|
|
|
- title: "保险总额同比(%)",
|
|
|
+ title: "年保险总额同比(%)",
|
|
|
count: 0,
|
|
|
decimals: 2,
|
|
|
icon: "el-icon-notebook-1"
|
|
|
@@ -317,7 +349,7 @@ export default {
|
|
|
// click: function(item) {
|
|
|
// // alert(JSON.stringify(item));
|
|
|
// },
|
|
|
- title: "人均保险",
|
|
|
+ title: "年人均保险",
|
|
|
count: 0,
|
|
|
decimals: 2,
|
|
|
icon: "el-icon-s-custom"
|
|
|
@@ -328,7 +360,7 @@ export default {
|
|
|
// click: function(item) {
|
|
|
// // alert(JSON.stringify(item));
|
|
|
// },
|
|
|
- title: "人均保险同比(%)",
|
|
|
+ title: "年人均保险同比(%)",
|
|
|
count: 0,
|
|
|
icon: "el-icon-notebook-2"
|
|
|
// href:'https://avuejs.com',
|
|
|
@@ -342,6 +374,7 @@ export default {
|
|
|
this.annual = getYearDate().toString();
|
|
|
this.annual2 = getYearDate().toString();
|
|
|
this.annual3 = getYearDate().toString();
|
|
|
+ this.annual4 = getYearDate().toString();
|
|
|
this.isHeight.height = window.innerHeight - 165 + "px";
|
|
|
this.getWorkDicts("month").then(res => {
|
|
|
this.moonList = res.data.data;
|
|
|
@@ -351,6 +384,7 @@ export default {
|
|
|
this.getsalaryStatistics();
|
|
|
this.getsalaryData();
|
|
|
this.getsalaryDataChain();
|
|
|
+ this.getsalaryAverage();
|
|
|
},
|
|
|
components: {
|
|
|
indexCard,
|
|
|
@@ -413,6 +447,28 @@ export default {
|
|
|
this.moon = null;
|
|
|
this.getsalaryDataChain();
|
|
|
},
|
|
|
+ getsalaryAverage() {
|
|
|
+ this.xxList = [];
|
|
|
+ this.czList = [];
|
|
|
+ this.gzList = [];
|
|
|
+ salaryAverage({ annual: this.annual4 })
|
|
|
+ .then(res => {
|
|
|
+ res.data.data.forEach(e => {
|
|
|
+ if (e.salaryType == "小学部") {
|
|
|
+ this.xxList.push(Number(e.fsalary));
|
|
|
+ }
|
|
|
+ if (e.salaryType == "初中部") {
|
|
|
+ this.czList.push(Number(e.fsalary));
|
|
|
+ }
|
|
|
+ if (e.salaryType == "高中部") {
|
|
|
+ this.gzList.push(Number(e.fsalary));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.commoDity3();
|
|
|
+ });
|
|
|
+ },
|
|
|
getsalaryDataChain() {
|
|
|
this.yearList = [];
|
|
|
this.fsalaryList2 = [];
|
|
|
@@ -536,7 +592,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ["工资", "人数", "工资比", "人数比"]
|
|
|
+ data: ["工资", "人数", "工资增加率", "人数增长率"]
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
@@ -597,7 +653,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
- name: "工资比",
|
|
|
+ name: "工资增加率",
|
|
|
position: "left",
|
|
|
alignTicks: true,
|
|
|
axisLine: {
|
|
|
@@ -613,7 +669,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
- name: "工资比",
|
|
|
+ name: "工资增加率",
|
|
|
position: "right",
|
|
|
alignTicks: true,
|
|
|
offset: 80,
|
|
|
@@ -643,13 +699,13 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
data: this.fsalaryContrastList,
|
|
|
- name: "工资比",
|
|
|
+ name: "工资增加率",
|
|
|
yAxisIndex: 2,
|
|
|
type: "line"
|
|
|
},
|
|
|
{
|
|
|
data: this.studentNumberContrastList,
|
|
|
- name: "人数比",
|
|
|
+ name: "人数增长率",
|
|
|
yAxisIndex: 3,
|
|
|
type: "line"
|
|
|
}
|
|
|
@@ -669,7 +725,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ["工资", "人数", "工资比", "人数比"]
|
|
|
+ data: ["工资", "人数", "工资增加率", "人数增长率"]
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
@@ -717,7 +773,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
- name: "工资比",
|
|
|
+ name: "工资增加率",
|
|
|
position: "left",
|
|
|
alignTicks: true,
|
|
|
axisLine: {
|
|
|
@@ -733,7 +789,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
- name: "工资比",
|
|
|
+ name: "工资增加率",
|
|
|
position: "right",
|
|
|
alignTicks: true,
|
|
|
offset: 80,
|
|
|
@@ -763,18 +819,92 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
data: this.fsalaryContrastList2,
|
|
|
- name: "工资比",
|
|
|
+ name: "工资增加率",
|
|
|
yAxisIndex: 2,
|
|
|
type: "line"
|
|
|
},
|
|
|
{
|
|
|
data: this.studentNumberContrastList2,
|
|
|
- name: "人数比",
|
|
|
+ name: "人数增长率",
|
|
|
yAxisIndex: 3,
|
|
|
type: "line"
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
+ },
|
|
|
+ commoDity3() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
|
|
|
+ let myChart = this.$echarts.init(document.getElementById("commoDity3"));
|
|
|
+ const colors = ["#5470C6", "#91CC75", "#EE6666", "#00008b"];
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["小学部", "初中部", "高中部"]
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "一月",
|
|
|
+ "二月",
|
|
|
+ "三月",
|
|
|
+ "四月",
|
|
|
+ "五月",
|
|
|
+ "六月",
|
|
|
+ "七月",
|
|
|
+ "八月",
|
|
|
+ "九月",
|
|
|
+ "十月",
|
|
|
+ "十一月",
|
|
|
+ "十二月"
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "人民币",
|
|
|
+ alignTicks: true,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0]
|
|
|
+ },
|
|
|
+ onZero: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 元"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: this.xxList,
|
|
|
+ name: "小学部",
|
|
|
+ type: "bar"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: this.czList,
|
|
|
+ name: "初中部",
|
|
|
+ type: "bar"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: this.gzList,
|
|
|
+ name: "高中部",
|
|
|
+ type: "bar"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
QuKatie