Merge branch 'dev-xiaole' into shenzhen-dev
This commit is contained in:
commit
dc5a3f9584
@ -80,6 +80,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import conProgress from '../jChart/pie/progress.vue'
|
||||
import conProgress from '../components/progress.vue'
|
||||
export default {
|
||||
components:{conProgress},
|
||||
props: {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import conProgress from '../jChart/pie/progress.vue'
|
||||
import conProgress from '../components/progress.vue'
|
||||
export default {
|
||||
components:{conProgress},
|
||||
data() {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import problemChart from '../jChart/pie/problemChart.vue'
|
||||
import problemChart from '../jChart/pie/JProblemChart'
|
||||
export default {
|
||||
components:{problemChart},
|
||||
props: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user