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

Merge branch 'dev-xiaole' into shenzhen-dev

Browse Source
This commit is contained in:
骆乐 2022-08-04 15:25:14 +08:00
commit dc5a3f9584
13 changed files with 436 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/progress.vue → src/views/projectAdmin/dataBoard/projectHuScreen/components/progress.vue
View File

1
src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue
View File

@ -80,6 +80,7 @@ export default {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber: 4,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {

0
src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/problemChart.vue → src/views/projectAdmin/dataBoard/projectHuScreen/jChart/pie/JProblemChart.vue
View File

90
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue
View File

@ -1,13 +1,25 @@
<template> <template>
<!-- 年龄结构 --> <!-- 年龄结构 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="topTit">
</div> <div class="blue"></div><span>在场</span>
<div class="purple"></div><span>在职</span>
<div class="topright">
<p>在职平均年龄： <a>42</a></p>
<p>在场平均年龄： <a>42</a></p>
</div>
</div>
<div class="mychart">
<JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" />
</div>
</div>
</template> </template>
<script> <script>
import JBarChart from "../jChart/bar/JBarChart.vue";
export default { export default {
components: { JBarChart },
props: { props: {
title: { title: {
@ -17,16 +29,42 @@ export default {
}, },
data() { data() {
return { return {
xData: ["18岁及下", "18-45岁", "45-59岁", "60岁以上"],
}; yData: [
{
value: 170,
itemStyle: {
color: "#a9adb6"
}
}, },
{
value: 320,
} itemStyle: {
color: "#557dee"
}
},
{
value: 270,
itemStyle: {
color: "#43d7b5"
}
},
{
value: 310,
itemStyle: {
color: "#ff6c7f"
}
}
],
color: ["#5be2f6", "#5281f7"],
grid: ["10%", "5%", "15%", "5%"]
};
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +75,38 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.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: 90%;
}
} }
</style> </style>

89
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftCenter.vue
View File

@ -1,7 +1,54 @@
<template> <template>
<!-- 人员概览 --> <!-- 人员概览 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="personCount">
<div class="countItem">
<img src="@/assets/images/dataBoard/numImg_purple.png" />
<div class="info">
<div class="num1">
{{ '62,590' }}
</div>
<!-- 实名制人数 -->
<div class="label label1">
{{ '实名制人数' }}
</div>
</div>
</div>
<div class="countItem">
<img src="@/assets/images/dataBoard/numImg_orange.png" />
<div class="info">
<div class="num2">
{{ 62590 }}
</div>
<div class="label">
{{ '特殊工种人数' }}
</div>
</div>
</div>
<div class="countItem">
<img src="@/assets/images/dataBoard/numImg_orange.png" />
<div class="info">
<div class="num3">
{{ '89%'}}
</div>
<div class="label">
{{ '在职男女比例' }}
</div>
</div>
</div>
<div class="countItem">
<img src="@/assets/images/dataBoard/numImg_orange.png" />
<div class="info">
<div class="num4">
{{ 62590}}
</div>
<div class="label">
{{ '入场培训人数' }}
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -26,7 +73,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +84,44 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.personCount {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
margin-left: 30px;
.countItem {
flex-shrink: 0;
height: 35%;
width:48%;
margin-top: 20px;
img {
margin-right: 8px;
}
.info{
display: inline-block;
line-height: 28px;
.num1{
color:#7851f6;
}
.num2{
color:#6ee4f0;
}
.num3{
color:#3d83f3;
}
.num4{
color: #7852f7;
}
.label{
font-size: 12px;
}
.label1{
width:68px;
}
}
}
}
} }
</style> </style>

99
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftTop.vue
View File

@ -1,14 +1,42 @@
<template> <template>
<!-- 人员类别 --> <!-- 人员类别 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="personCount">
</div> <div class="countItem">
<img src="@/assets/images/dataBoard/numImg_purple.png" />
<div class="info">
<div class="num1">{{ 62590 }}</div>
<!-- 实名制人数 -->
<div class="label label1">{{ '在场总人数' }}</div>
</div>
</div>
<div class="countItem">
<img src="@/assets/images/dataBoard/numImg_orange.png" />
<div class="info">
<div class="num2">{{ 62590 }}</div>
<!-- 在场人数 -->
<div class="label">{{ '在场劳务人数' }}</div>
</div>
</div>
</div>
<div class="persontype">
<span>项目管理人员</span>
<p class="person">679</p>
<span>特种作业人员</span>
<p class="person">679</p>
</div>
<div class="persontype">
<span>一般作业人员</span>
<p class="person">679</p>
<span>临时作业人员</span>
<p class="person">679</p>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
title: { title: {
type: String, type: String,
@ -16,17 +44,13 @@ export default {
} }
}, },
data() { data() {
return { return {};
}
}; };
},
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +61,55 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.personCount {
display: flex;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 30px;
.countItem {
flex: 1;
height: 35%;
display: flex;
img {
margin-right: 8px;
}
.info {
margin-top: 5px;
.num1 {
color: #309b8a;
}
.num2 {
color: #f7d400;
}
.label {
font-size: 12px;
}
.label1 {
width: 68px;
}
}
}
}
.persontype {
display: flex;
justify-content: center;
height: 38px;
line-height: 30px;
margin-bottom: 20px;
span{
font-size: 12px;
margin-right: 10px;
}
.person {
width: 15%;
text-align: center;
margin-right: 30px;
color: #47b1c4;
background-image: url(~@/assets/images/projectImg/numBgc.png);
background-size:100%;
background-repeat: no-repeat;
}
}
} }
</style> </style>

97
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightCenter.vue
View File

@ -1,42 +1,101 @@
<template> <template>
<!-- 安全培训 --> <!-- 安全培训 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="title">{{ title }}</div>
<div class="content">
</div> <div class="chart">
<JRingChart
:title="{ text: 3214, subTitle: '总人数' }"
:color="['#557DEE', '#43D7B5']"
:data="[{ value: 2314 }, { value: 987 }]"
:radius="['55%', '80%']"
/>
</div>
<div class="count">
<div class="count-item">
<div class="label">已培训人数</div>
<div class="num">2314</div>
</div>
<div class="count-item">
<div class="label">为培训人数</div>
<div class="num">987</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import JRingChart from '../jChart/pie/JRingChart.vue'
export default { export default {
components: { JRingChart },
props: { props: {
title: { title: {
type: String, type: String,
default: "default title" default: 'default title'
} }
}, },
data() { data() {
return { return {}
}
};
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
.title {
.titleTxt { padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px; font-size: 18px;
color: #6ee4f0; color: #6ee4f0;
margin-top: 5px; }
margin-left: 5px; .content {
height: calc(100% - 30px);
display: flex;
.chart {
width: 55%;
height: 100%;
}
.count {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.count-item {
position: relative;
&::before {
position: absolute;
left: -16px;
top: 10px;
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
}
&:first-child {
margin-bottom: 20px;
}
&:first-child::before {
background-color: #557dee;
}
&:last-child::before {
background-color: #43d7b5;
}
.label {
margin-bottom: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.num {
font-size: 18px;
}
}
}
} }
} }
</style> </style>

70
src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/rightTop.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<!-- 人员类型 --> <!-- 人员类型 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="myChart" ref="myChart"></div>
</div> </div>
</template> </template>
<script> <script>
import echarts from "echarts4";
export default { export default {
props: { props: {
title: { title: {
type: String, type: String,
@ -16,17 +16,59 @@ export default {
} }
}, },
data() { data() {
return { return {};
};
}, },
created() {
this.initMyChart();
} },
methods: {
initMyChart() {
const myChart = echarts.init(this.$refs.myChart);
const option = {
series: [
{
type: "pie",
roseType: "radius",
radius: [30, 60],
// top: 50,
left: "center",
width: 350,
label: {
alignTo: "edge",
formatter: "{name|{b}}\n{time|{c} 人}",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: [
{ name: "项目管理人员", value: 210 },
{ name: "特种作业人员", value: 103 },
{ name: "临时工", value: 52 },
{ name: "外包工", value: 123 },
{ name: "一般作用人员", value: 80 }
]
}
]
};
myChart.setOption(option);
}
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +79,10 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.myChart {
width: 100%;
height: 90%;
}
} }
</style> </style>

2
src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerBottom.vue
View File

@ -7,7 +7,7 @@
</template> </template>
<script> <script>
import conProgress from '../jChart/pie/progress.vue' import conProgress from '../components/progress.vue'
export default { export default {
components:{conProgress}, components:{conProgress},
props: { props: {

6
src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftBottom.vue
View File

@ -4,7 +4,7 @@
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="myChart"> <div class="myChart">
<problemChart <problemChart
:title="{ text: 654, subTitle: '本周总任务' }" :title="{ text: 654, subTitle: '本周总任务' ,y:'35%'}"
:color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']" :color="['#3cabfd','#57ec72','#f294c6','#f43a8d','#6ee4f0']"
:data="[ :data="[
{ value: 45, name: '未开始' }, { value: 45, name: '未开始' },
@ -18,7 +18,7 @@
</template> </template>
<script> <script>
import problemChart from '../jChart/pie/problemChart.vue' import problemChart from '../jChart/pie/JProblemChart'
export default { export default {
components:{problemChart}, components:{problemChart},
props: { props: {
@ -51,7 +51,7 @@ components:{problemChart},
} }
.myChart{ .myChart{
width: 100%; width: 100%;
height: 100%; height: 90%;
} }
} }
</style> </style>

42
src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/leftCenter.vue
View File

@ -1,13 +1,18 @@
<template> <template>
<!-- 状态统计 --> <!-- 状态统计 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <div class="titleTxt">{{ title }}</div>
<div class="mychart">
<JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" :title="{ text: '全部' }" />
</div>
</div> </div>
</template> </template>
<script> <script>
import JBarChart from '../jChart/bar/JBarChart.vue'
export default { export default {
components: { JBarChart },
props: { props: {
title: { title: {
@ -17,7 +22,34 @@ export default {
}, },
data() { data() {
return { return {
xData:['未开始','进行中','已完成','延期'],
yData:[
{
value: 170,
itemStyle: {
color: '#a9adb6'
}
},
{
value: 320,
itemStyle: {
color: '#557dee'
}
},
{
value: 270,
itemStyle: {
color: '#43d7b5'
}
},
{
value: 310,
itemStyle: {
color: '#ff6c7f'
}
}],
color:['#a9adb6','#557dee','#43d7b5','#ff6c7f'],
grid:['10%','5%','7%','5%']
}; };
}, },
@ -26,7 +58,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +69,10 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
.mychart{
width: 100%;
height: 95%;
}
} }
</style> </style>

2
src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/constructProgress.vue
View File

@ -49,7 +49,7 @@
</template> </template>
<script> <script>
import conProgress from '../jChart/pie/progress.vue' import conProgress from '../components/progress.vue'
export default { export default {
components:{conProgress}, components:{conProgress},
data() { data() {

2
src/views/projectAdmin/dataBoard/projectHuScreen/projectHuli/qualityProblem.vue
View File

@ -18,7 +18,7 @@
</template> </template>
<script> <script>
import problemChart from '../jChart/pie/problemChart.vue' import problemChart from '../jChart/pie/JProblemChart'
export default { export default {
components:{problemChart}, components:{problemChart},
props: { props: {