Merge branch 'dev-xiaole' into shenzhen-dev

This commit is contained in:
骆乐 2022-08-04 15:25:14 +08:00
commit dc5a3f9584
13 changed files with 436 additions and 66 deletions

View File

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

View File

@ -1,13 +1,25 @@
<template>
<!-- 年龄结构 -->
<div class="container">
<!-- 年龄结构 -->
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
</div>
<div class="topTit">
<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>
<script>
import JBarChart from "../jChart/bar/JBarChart.vue";
export default {
components: { JBarChart },
props: {
title: {
@ -17,16 +29,42 @@ export default {
},
data() {
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>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +75,38 @@ export default {
margin-top: 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>

View File

@ -1,7 +1,54 @@
<template>
<!-- 人员概览 -->
<div class="container">
<div class="titleTxt">{{ title }}</div>
<div class="containerBox">
<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>
</template>
@ -26,7 +73,7 @@ export default {
</script>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +84,44 @@ export default {
margin-top: 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>

View File

@ -1,14 +1,42 @@
<template>
<!-- 人员类别 -->
<div class="container">
<!-- 人员类别 -->
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
</div>
<div class="personCount">
<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>
<script>
export default {
props: {
title: {
type: String,
@ -16,17 +44,13 @@ export default {
}
},
data() {
return {
};
},
}
return {};
}
};
</script>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +61,55 @@ export default {
margin-top: 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>

View File

@ -1,42 +1,101 @@
<template>
<!-- 安全培训 -->
<div class="container">
<div class="titleTxt">{{ title }}</div>
</div>
<!-- 安全培训 -->
<div class="containerBox">
<div class="title">{{ title }}</div>
<div class="content">
<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>
<script>
import JRingChart from '../jChart/pie/JRingChart.vue'
export default {
components: { JRingChart },
props: {
title: {
type: String,
default: "default title"
default: 'default title'
}
},
data() {
return {
};
},
return {}
}
}
</script>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
.titleTxt {
.title {
padding-left: 6px;
height: 30px;
line-height: 30px;
font-size: 18px;
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>

View File

@ -1,14 +1,14 @@
<template>
<!-- 人员类型 -->
<div class="container">
<!-- 人员类型 -->
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
</div>
<div class="myChart" ref="myChart"></div>
</div>
</template>
<script>
import echarts from "echarts4";
export default {
props: {
title: {
type: String,
@ -16,17 +16,59 @@ export default {
}
},
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>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +79,10 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.myChart {
width: 100%;
height: 90%;
}
}
</style>

View File

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

View File

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

View File

@ -1,13 +1,18 @@
<template>
<!-- 状态统计 -->
<div class="container">
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
<div class="mychart">
<JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" :title="{ text: '全部' }" />
</div>
</div>
</template>
<script>
import JBarChart from '../jChart/bar/JBarChart.vue'
export default {
components: { JBarChart },
props: {
title: {
@ -17,7 +22,34 @@ export default {
},
data() {
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>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +69,10 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.mychart{
width: 100%;
height: 95%;
}
}
</style>

View File

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

View File

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