admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(劳务管理):出勤统计模块

Browse Source
This commit is contained in:
骆乐 2022-08-05 10:42:06 +08:00
parent bef7f4eed0
commit 86161ef942
2 changed files with 123 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerBottom.vue
View File

@ -50,18 +50,18 @@ components: { Card },
.contents{
display: flex;
flex-flow: wrap;
justify-content: space-between;
height: 110px;
justify-content: center;
height: 48%;
.smallBox{
background: linear-gradient(to top, #173b51, #132f44, #0e2135);
border-radius: 5px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 7px;
margin-top: 2%;
margin-bottom: 1%;
margin-left: 15px;
width: 18%;
.left{
width: 50px;
height: 70px;
width: 30%;
height: 90%;
margin:5px;
background-color: #fff;
}

136
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/centerTop.vue
View File

@ -1,14 +1,37 @@
<template>
<!-- 出勤统计 -->
<div class="container">
<div class="titleTxt">{{ title }}</div>
</div>
<!-- 出勤统计 -->
<Card :title="title">
<div class="contents">
<div>
<div class="point"></div>
<span class="smallTit">工种出勤统计</span>
<div class="box">
<div class="outBox" v-for="(item,index) in dataList" :key="index">
<span class="name">{{item.name}}</span>
<p class="num">{{item.num}}</p>
</div>
</div>
</div>
<div class="point botBox"></div>
<span class="smallTit">企业出勤排名</span>
<div class="topTit">
<div class="blue"></div>
<span>在场</span>
<div class="purple"></div>
<span>总人数</span>
</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'
export default {
components: { Card,JBarChart },
props: {
title: {
type: String,
@ -17,26 +40,99 @@ export default {
},
data() {
return {
dataList: [
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" },
{ name: "钢筋工", num: "679" }
],
xData: ['中建一局', '中建一局', '中建一局', '中建一局','中建一局', '中建一局', '中建一局', '中建一局'],
series: [{ data: [170, 180,90,70,60,50,50,50,] }, { data: [220,280,190,180,300,200,200,200,] }],
color: ['#5be2f6', '#5281f7'],
grid: ['10%', '5%', '15%', '5%']
};
},
}
}
};
</script>
<style lang="less" scoped>
.container {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.contents {
margin: 20px 0px 20px 30px;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
.point {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #5be1f5;
display: inline-block;
}
.smallTit {
color: #51cadd;
font-size: 12px;
margin-left: 15px;
}
.box {
display: flex;
flex-flow: wrap;
justify-content: center;
align-items: center;
width: 95%;
height: 40%;
margin-left: 6%;
margin-top: 2%;
}
.outBox {
width: 33%;
height: 33%;
margin-bottom: 10px;
.name {
height: 50px;
width: 50%;
line-height: 40px;
margin-right: 35px;
}
.num {
display: inline-block;
width: 30%;
height: 40px;
line-height: 40px;
text-align: center;
color: #4fc5d9;
background-image: url(~@/assets/images/projectImg/numBgc.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
.botBox {
margin-top: 20px;
}
.topTit {
margin-top: 20px;
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;
}
}
}
.mychart {
width: 100%;
height: 40%;
}
</style>