mt-fe-group/pad-demo
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

质量

Browse Source
This commit is contained in:
helloDy 2022-09-21 14:41:05 +08:00
parent fe7b9d8116
commit b3bc8c6dfd
6 changed files with 205 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/quality/components/monthBar.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<div class="card" style="border-bottom-right-radius: 40px">
<p class="chartTitle">D产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -8,7 +8,7 @@
</div>
<div id="monthPie" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
<p class="chartTitle">E产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -52,12 +52,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '451',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -66,7 +84,7 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
@ -157,15 +175,15 @@ export default {
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
justify-content: center;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.37rem;
width: 3.65rem;
height: 63vh;
background-color: white;
border-radius: 5%;
border-radius: 14px;
text-align: center;
color: #276BFF;
font-size: 0.16rem;

54
src/pages/quality/components/monthPie.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<div class="card" style="border-bottom-right-radius: 40px">
<p class="chartTitle">B产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -8,7 +8,7 @@
</div>
<div id="monthB" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
<p class="chartTitle">C产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -52,12 +52,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '454',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -66,7 +84,7 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
@ -98,12 +116,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '456',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -112,7 +148,7 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
@ -139,15 +175,15 @@ export default {
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
justify-content: center;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
width: 3.65rem;
height: 63vh;
background-color: white;
border-radius: 5%;
border-radius: 14px;
text-align: center;
color: #276BFF;
font-size: 0.16rem;

48
src/pages/quality/components/monthPies.vue
View File

@ -1,14 +1,6 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<p class="chartTitle">A产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="monthA" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<div class="card" style="border-bottom-right-radius: 40px">
<p class="chartTitle">缺陷总量排名</p>
<div class="imgcss">
<div class="img-left"></div>
@ -16,6 +8,14 @@
</div>
<div id="monthAll" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
<p class="chartTitle">A产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="monthA" class="bar"></div>
</div>
</div>
</template>
@ -45,7 +45,7 @@ export default {
this.chart.setOption(
{
grid: {
left: 50,
left: 60,
top: 23
},
xAxis: {
@ -94,12 +94,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '454',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -108,7 +126,7 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
@ -135,15 +153,15 @@ export default {
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
justify-content: center;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
width: 3.65rem;
height: 63vh;
background-color: white;
border-radius: 5%;
border-radius: 14px;
text-align: center;
color: #276BFF;
font-size: 0.16rem;

30
src/pages/quality/components/swipeBar.vue
View File

@ -8,7 +8,7 @@
</div>
<div id="bar" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 40px">
<div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
<p class="chartTitle">E产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -52,12 +52,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '455',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -66,7 +84,7 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
@ -99,7 +117,7 @@ export default {
right: '10%'
},
title: {
text: '452',
text: '456',
subtext: '合计',
left: '33%',
top: '33%',
@ -154,12 +172,12 @@ export default {
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
justify-content: center;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.62rem;
width: 3.65rem;
height: 63vh;
background-color: white;
border-radius: 14px;

57
src/pages/quality/components/swipePie.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<div class="card" style="border-bottom-right-radius: 40px">
<p class="chartTitle">B产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -8,7 +8,7 @@
</div>
<div id="pie1" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
<p class="chartTitle">C产线</p>
<div class="imgcss">
<div class="img-left"></div>
@ -52,12 +52,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '454',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -66,7 +84,7 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
@ -98,12 +116,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '453',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -112,14 +148,11 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
@ -139,15 +172,15 @@ export default {
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
justify-content: center;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
width: 3.65rem;
height: 63vh;
background-color: white;
border-radius: 5%;
border-radius: 14px;
text-align: center;
color: #276BFF;
font-size: 0.16rem;

51
src/pages/quality/components/swipePies.vue
View File

@ -1,14 +1,6 @@
<template>
<div class="content">
<div class="card" style="border-bottom-right-radius: 20%">
<p class="chartTitle">A产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="pieDiv" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 20%">
<div class="card" style="border-bottom-right-radius: 40px">
<p class="chartTitle">缺陷总量排名</p>
<div class="imgcss">
<div class="img-left"></div>
@ -16,6 +8,14 @@
</div>
<div id="barDiv" class="bar"></div>
</div>
<div class="card" style="border-bottom-left-radius: 40px; margin-left: 0.07rem">
<p class="chartTitle">A产线</p>
<div class="imgcss">
<div class="img-left"></div>
<div class="img-right"></div>
</div>
<div id="pieDiv" class="bar"></div>
</div>
</div>
</template>
@ -45,7 +45,7 @@ export default {
this.chart.setOption(
{
grid: {
left: 50,
left: 60,
top: 23
},
xAxis: {
@ -96,12 +96,30 @@ export default {
top: '15%',
right: '10%'
},
title: {
text: '452',
subtext: '合计',
left: '33%',
top: '33%',
textAlign: 'center',
textStyle: {
color: '#276BFF',
fontSize: '0.27rem',
height: '0.39rem'
},
subtextStyle: {
color: '#276BFF',
fontSize: '0.16rem',
align: 'center',
verticalAlign: 'top'
}
},
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
@ -110,14 +128,11 @@ export default {
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
@ -137,15 +152,15 @@ export default {
<style lang="scss" scoped>
.content{
display: flex;
justify-content: space-around;
justify-content: center;
margin-top: 0.1rem;
font-size: 0.135rem;
.card{
width: 3.4rem;
width: 3.65rem;
height: 63vh;
background-color: white;
border-radius: 5%;
border-radius: 14px;
text-align: center;
color: #276BFF;
font-size: 0.16rem;