141 lines
3.2 KiB
Vue
141 lines
3.2 KiB
Vue
<template>
|
||
<Card :title="title">
|
||
<div class="topTit">
|
||
<div class="blue"></div>
|
||
<span>在场</span>
|
||
<div class="purple"></div>
|
||
<span>在职</span>
|
||
<div class="topright">
|
||
<p>
|
||
在职平均年龄：
|
||
<a>{{ statisticsCount.workercount.avgage.toFixed(0) }}</a>
|
||
</p>
|
||
<p>
|
||
在场平均年龄：
|
||
<a>{{ statisticsCount.presencecount.avgage.toFixed(0) }}</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="mychart">
|
||
<JBarChart :xData="xData" :series="series" :color="color" :grid="grid" />
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from "../components/Card.vue";
|
||
import JBarChart from "../jChart/bar/JBarChart.vue";
|
||
import { selectProjectWorkerStatisticsApi } from "@/assets/js/api/dataBoard.js";
|
||
export default {
|
||
components: { Card, JBarChart },
|
||
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: "default title"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
xData: ["18岁及下", "18-45岁", "45-59岁", "60岁以上"],
|
||
series: [{ data: [22, 33, 22, 56] }, { data: [32, 22, 32, 15] }],
|
||
color: ["#5be2f6", "#5281f7"],
|
||
grid: ["10%", "5%", "15%", "5%"],
|
||
statisticsCount: {
|
||
attendancePersonNum: 0,
|
||
educationPersonNum: 0,
|
||
workercount: {
|
||
lwPersonYesterdayAdd: 0,
|
||
eduPersonTotal: 0,
|
||
jfGlPersonTotal: 0,
|
||
age18: 0,
|
||
age18to25: 0,
|
||
womanPersonTotal: 0,
|
||
lsPersonTotal: 0,
|
||
jlGlPersonTotal: 0,
|
||
age45to60: 0,
|
||
lwPersonTotal: 0,
|
||
manPersonTotal: 0,
|
||
totalPerson: 0,
|
||
age25to35: 0,
|
||
glPersonTotal: 0,
|
||
yfGlPersonTotal: 0,
|
||
avgage: 0,
|
||
age35to45: 0,
|
||
glPersonYesterdayAdd: 0,
|
||
age60: 0
|
||
}
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
selectProjectWorkerStatisticsApi({
|
||
sn: this.$store.state.projectSn
|
||
}).then(res => {
|
||
console.log("-----", res);
|
||
this.statisticsCount = res.result;
|
||
var json1 = this.statisticsCount.presencecount;
|
||
var json2 = this.statisticsCount.workercount;
|
||
this.series = [
|
||
{
|
||
data: [
|
||
json1.age18,
|
||
json1.age18to25 + json1.age25to35 + json1.age18to25,
|
||
json1.age45to60,
|
||
json1.age60
|
||
]
|
||
},
|
||
{
|
||
data: [
|
||
json2.age18,
|
||
json2.age18to25 + json2.age25to35 + json2.age18to25,
|
||
json2.age45to60,
|
||
json2.age60
|
||
]
|
||
}
|
||
];
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.topTit {
|
||
font-size: 12px;
|
||
color: #5d6674;
|
||
.blue,
|
||
.purple {
|
||
display: inline-block;
|
||
width: 15px;
|
||
height: 5px;
|
||
border-radius: 10px;
|
||
margin-left: 30px;
|
||
margin-right: 5px;
|
||
background-color: #5be2f6;
|
||
}
|
||
.purple {
|
||
background-color: #5181f7;
|
||
}
|
||
// span{
|
||
// margin-right: 30px;
|
||
// height: 15px;
|
||
// line-height: 15px;
|
||
// }
|
||
}
|
||
.topright {
|
||
display: inline-block;
|
||
p {
|
||
margin-left: 110px;
|
||
}
|
||
}
|
||
.mychart {
|
||
width: 100%;
|
||
height: calc(100% - 28px);
|
||
}
|
||
</style>
|