|
@@ -11,7 +11,34 @@
|
|
|
<but-card iconName="el-icon-edit-outline" name="添加后勤" />
|
|
|
</div>
|
|
|
<index-card title="教师工资总体数据" iconName="el-icon-view">
|
|
|
- <div slot="content" style="height:330px">
|
|
|
+ <div slot="select">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="annual2"
|
|
|
+ type="year"
|
|
|
+ size="mini"
|
|
|
+ placeholder="选择年"
|
|
|
+ value-format="yyyy"
|
|
|
+ style="margin-right:10px"
|
|
|
+ @change="getsalaryData"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-select
|
|
|
+ slot="content"
|
|
|
+ size="mini"
|
|
|
+ v-model="salaryType2"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="getsalaryData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div slot="content" style="height:290px">
|
|
|
<avue-data-icons :option="option"></avue-data-icons>
|
|
|
</div>
|
|
|
</index-card>
|
|
@@ -51,7 +78,63 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
- <div slot="content" style="height:500px" id="commoDity"></div>
|
|
|
+ <div slot="content" style="height:450px" id="commoDity"></div>
|
|
|
+ </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="annual3"
|
|
|
+ type="year"
|
|
|
+ size="mini"
|
|
|
+ placeholder="选择年"
|
|
|
+ value-format="yyyy"
|
|
|
+ style="margin-right:10px"
|
|
|
+ @change="getsalaryDataChain"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-select
|
|
|
+ slot="content"
|
|
|
+ size="mini"
|
|
|
+ v-model="moon"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ @change="moonChange"
|
|
|
+ clearable
|
|
|
+ style="margin-right:10px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in moonList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.dictValue"
|
|
|
+ :value="item.dictKey"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ slot="content"
|
|
|
+ size="mini"
|
|
|
+ v-model="semester"
|
|
|
+ placeholder="请选择学期"
|
|
|
+ clearable
|
|
|
+ @change="semesterChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options2"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="content" style="height:450px" id="commoDity2"></div>
|
|
|
</index-card>
|
|
|
<br />
|
|
|
</basic-container>
|
|
@@ -59,7 +142,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { salaryStatistics } from "@/api/wel";
|
|
|
+import { salaryStatistics, salaryData, salaryDataChain } from "@/api/wel";
|
|
|
import { mapGetters } from "vuex";
|
|
|
import indexCard from "../components/card.vue";
|
|
|
import butCard from "../components/butCard.vue";
|
|
@@ -67,11 +150,20 @@ export default {
|
|
|
name: "wel",
|
|
|
data() {
|
|
|
return {
|
|
|
+ moon: null,
|
|
|
+ semester: null,
|
|
|
+ moonList: [],
|
|
|
+ fsalaryList2: [],
|
|
|
+ studentNumberList2: [],
|
|
|
fsalaryList: [],
|
|
|
studentNumberList: [],
|
|
|
activeNames: ["1", "2", "3", "5"],
|
|
|
logActiveNames: ["24"],
|
|
|
annual: "2022",
|
|
|
+ annual2: "2022",
|
|
|
+ annual3: "2022",
|
|
|
+ salaryType: "",
|
|
|
+ salaryType2: "",
|
|
|
isHeight: {},
|
|
|
options: [
|
|
|
{
|
|
@@ -95,90 +187,105 @@ export default {
|
|
|
label: "后勤部"
|
|
|
}
|
|
|
],
|
|
|
- salaryType: "",
|
|
|
+ options2: [
|
|
|
+ {
|
|
|
+ value: "上学期",
|
|
|
+ label: "上学期"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "下学期",
|
|
|
+ label: "下学期"
|
|
|
+ }
|
|
|
+ ],
|
|
|
option: {
|
|
|
span: 6,
|
|
|
data: [
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "工资总额",
|
|
|
- count: 12678,
|
|
|
+ count: 0,
|
|
|
decimals: 2,
|
|
|
- icon: "el-icon-tickets",
|
|
|
+ icon: "el-icon-tickets"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "年工资额增长率(%)",
|
|
|
- count: 29,
|
|
|
- icon: "el-icon-s-marketing",
|
|
|
+ count: 0,
|
|
|
+ decimals: 2,
|
|
|
+ icon: "el-icon-s-marketing"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "人均工资",
|
|
|
- count: 35623,
|
|
|
- icon: "el-icon-s-finance",
|
|
|
+ count: 0,
|
|
|
+ decimals: 2,
|
|
|
+ icon: "el-icon-s-finance"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "年人均工资增长率(%)",
|
|
|
- count: 19,
|
|
|
- icon: "el-icon-s-claim",
|
|
|
+ count: 0,
|
|
|
+ decimals: 2,
|
|
|
+ icon: "el-icon-s-claim"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "保险总额",
|
|
|
- count: 16826,
|
|
|
- icon: "el-icon-s-cooperation",
|
|
|
+ count: 0,
|
|
|
+ decimals: 2,
|
|
|
+ icon: "el-icon-s-cooperation"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "保险总额同比(%)",
|
|
|
- count: 69,
|
|
|
- icon: "el-icon-notebook-1",
|
|
|
+ count: 0,
|
|
|
+ decimals: 2,
|
|
|
+ icon: "el-icon-notebook-1"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "人均保险",
|
|
|
- count: 16826,
|
|
|
- icon: "el-icon-s-custom",
|
|
|
+ count: 0,
|
|
|
+ decimals: 2,
|
|
|
+ icon: "el-icon-s-custom"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
},
|
|
|
{
|
|
|
- click: function(item) {
|
|
|
- // alert(JSON.stringify(item));
|
|
|
- },
|
|
|
+ // click: function(item) {
|
|
|
+ // // alert(JSON.stringify(item));
|
|
|
+ // },
|
|
|
title: "人均保险同比(%)",
|
|
|
- count: 30,
|
|
|
- icon: "el-icon-notebook-2",
|
|
|
+ count: 0,
|
|
|
+ icon: "el-icon-notebook-2"
|
|
|
// href:'https://avuejs.com',
|
|
|
- target: "_blank"
|
|
|
+ // target: "_blank"
|
|
|
}
|
|
|
]
|
|
|
}
|
|
@@ -186,9 +293,14 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.isHeight.height = window.innerHeight - 165 + "px";
|
|
|
+ this.getWorkDicts("month").then(res => {
|
|
|
+ this.moonList = res.data.data;
|
|
|
+ });
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getsalaryStatistics();
|
|
|
+ this.getsalaryData();
|
|
|
+ this.getsalaryDataChain();
|
|
|
},
|
|
|
components: {
|
|
|
indexCard,
|
|
@@ -215,6 +327,72 @@ export default {
|
|
|
this.commoDity();
|
|
|
});
|
|
|
},
|
|
|
+ moonChange() {
|
|
|
+ this.semester = null;
|
|
|
+ this.getsalaryDataChain();
|
|
|
+ },
|
|
|
+ semesterChange() {
|
|
|
+ this.moon = null;
|
|
|
+ this.getsalaryDataChain();
|
|
|
+ },
|
|
|
+ getsalaryDataChain() {
|
|
|
+ this.yearList = [];
|
|
|
+ this.fsalaryList2 = [];
|
|
|
+ this.studentNumberList2 = [];
|
|
|
+ salaryDataChain({
|
|
|
+ annual: this.annual3,
|
|
|
+ moon: this.moon,
|
|
|
+ semester: this.semester
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ let data = res.data.data;
|
|
|
+ for (let i = 5; i >= 0; i--) {
|
|
|
+ this.yearList.push(Number(this.annual3) - i + "年");
|
|
|
+ }
|
|
|
+ this.fsalaryList2.push(Number(data.fsalary));
|
|
|
+ this.fsalaryList2.push(Number(data.fsalaryOne));
|
|
|
+ this.fsalaryList2.push(Number(data.fsalaryTwo));
|
|
|
+ this.fsalaryList2.push(Number(data.fsalaryThree));
|
|
|
+ this.fsalaryList2.push(Number(data.fsalaryFour));
|
|
|
+ this.fsalaryList2.push(Number(data.fsalaryFive));
|
|
|
+ this.studentNumberList2.push(Number(data.studentNumber));
|
|
|
+ this.studentNumberList2.push(Number(data.studentNumberOne));
|
|
|
+ this.studentNumberList2.push(Number(data.studentNumberTwo));
|
|
|
+ this.studentNumberList2.push(Number(data.studentNumberThree));
|
|
|
+ this.studentNumberList2.push(Number(data.studentNumberFour));
|
|
|
+ this.studentNumberList2.push(Number(data.studentNumberFive));
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.commoDity2();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getsalaryData() {
|
|
|
+ salaryData({
|
|
|
+ annual: this.annual2,
|
|
|
+ salaryType: this.salaryType2
|
|
|
+ }).then(res => {
|
|
|
+ let data = res.data.data;
|
|
|
+ this.option.data.forEach(e => {
|
|
|
+ if (e.title == "工资总额") {
|
|
|
+ e.count = data.salaryRental;
|
|
|
+ } else if (e.title == "年工资额增长率(%)") {
|
|
|
+ e.count = data.annualWageGrowth;
|
|
|
+ } else if (e.title == "人均工资") {
|
|
|
+ e.count = data.averageWage;
|
|
|
+ } else if (e.title == "年人均工资增长率(%)") {
|
|
|
+ e.count = data.averageWageGrowthRate;
|
|
|
+ } else if (e.title == "保险总额") {
|
|
|
+ e.count = data.insuredSum;
|
|
|
+ } else if (e.title == "保险总额同比(%)") {
|
|
|
+ e.count = data.insuredSumYear;
|
|
|
+ } else if (e.title == "人均保险") {
|
|
|
+ e.count = data.insuredMean;
|
|
|
+ } else if (e.title == "人均保险同比(%)") {
|
|
|
+ e.count = data.insuredMeanYear;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
handleChange(val) {
|
|
|
window.console.log(val);
|
|
|
},
|
|
@@ -275,6 +453,51 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
+ },
|
|
|
+ commoDity2() {
|
|
|
+ // 基于准备好的dom,初始化echarts实例,所以只能在mounted中调用
|
|
|
+ let myChart = this.$echarts.init(document.getElementById("commoDity2"));
|
|
|
+
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["工资", "人数"]
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: this.yearList,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 元"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: this.fsalaryList2,
|
|
|
+ name: "工资",
|
|
|
+ type: "bar"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: this.studentNumberList2,
|
|
|
+ name: "人数",
|
|
|
+ type: "bar"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|