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-20 16:15:02 +08:00
parent 6b165840b6
commit fe7b9d8116
7 changed files with 138 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,14 +55,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {
@ -98,21 +98,39 @@ export default {
top: '15%', top: '15%',
right: '10%' 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'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: ['50%', '75%'], radius: ['50%', '75%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: false,
fontSize: '20', fontSize: '20',
fontWeight: 'bold' fontWeight: 'bold'
} }
@ -144,7 +162,7 @@ export default {
font-size: 0.135rem; font-size: 0.135rem;
.card{ .card{
width: 3.4rem; width: 3.37rem;
height: 63vh; height: 63vh;
background-color: white; background-color: white;
border-radius: 5%; border-radius: 5%;
@ -180,7 +198,7 @@ export default {
} }
.bar{ .bar{
width: 3.4rem; // width: 4.7rem;
height: 60vh; height: 60vh;
} }
} }

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

@ -55,14 +55,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {
@ -101,14 +101,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {

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

@ -66,7 +66,8 @@ export default {
barWidth: '35%', barWidth: '35%',
label: { label: {
show: true, show: true,
position: 'top' position: 'top',
textBorderColor: 'none'
}, },
itemStyle: { itemStyle: {
color: function (params) { color: function (params) {
@ -96,14 +97,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {

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

@ -1,6 +1,6 @@
<template> <template>
<div class="content"> <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> <p class="chartTitle">D产线</p>
<div class="imgcss"> <div class="imgcss">
<div class="img-left"></div> <div class="img-left"></div>
@ -8,7 +8,7 @@
</div> </div>
<div id="bar" class="bar"></div> <div id="bar" class="bar"></div>
</div> </div>
<div class="card" style="border-bottom-left-radius: 20%"> <div class="card" style="border-bottom-left-radius: 40px">
<p class="chartTitle">E产线</p> <p class="chartTitle">E产线</p>
<div class="imgcss"> <div class="imgcss">
<div class="img-left"></div> <div class="img-left"></div>
@ -55,14 +55,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {
@ -98,28 +98,43 @@ export default {
top: '15%', top: '15%',
right: '10%' 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'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: ['50%', '75%'], radius: ['50%', '75%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {
show: true, show: false,
fontSize: '20', fontSize: '20',
fontWeight: 'bold' fontWeight: 'bold'
} }
}, },
labelLine: {
show: false
},
data: [ data: [
{ value: 123, name: '擦划伤' }, { value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' }, { value: 122, name: '脏污' },
@ -144,15 +159,15 @@ export default {
font-size: 0.135rem; font-size: 0.135rem;
.card{ .card{
width: 3.4rem; width: 3.62rem;
height: 63vh; height: 63vh;
background-color: white; background-color: white;
border-radius: 5%; border-radius: 14px;
text-align: center; text-align: center;
color: #276BFF; color: #276BFF;
font-size: 0.16rem; font-size: 0.16rem;
font-weight: 600; font-weight: 600;
opacity: 0.8; opacity: 0.9;
.chartTitle{ .chartTitle{
margin: 5vh auto 0.5vh 0.25rem; margin: 5vh auto 0.5vh 0.25rem;

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

@ -55,14 +55,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {
@ -101,14 +101,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {

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

@ -66,7 +66,8 @@ export default {
barWidth: '35%', barWidth: '35%',
label: { label: {
show: true, show: true,
position: 'top' position: 'top',
textBorderColor: 'none'
}, },
itemStyle: { itemStyle: {
// normal: { // normal: {
@ -98,14 +99,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [ series: [
{ {
name: 'Access From',
center: ['35%', '43%'], center: ['35%', '43%'],
type: 'pie', type: 'pie',
radius: '75%', radius: '75%',
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: false, show: false,
position: 'center' position: 'center',
textBorderColor: 'none'
}, },
emphasis: { emphasis: {
label: { label: {

92
src/pages/quality/quality.vue
View File

@ -21,24 +21,28 @@
<p style="font-size: 0.142rem;">23.12</p> <p style="font-size: 0.142rem;">23.12</p>
</div> </div>
<div class="date"> <div class="date">
<p :class="chooseDate ? 'day' : 'month'" @click="changeDate(1)">日</p> <p :class="chooseDate ? 'day' : 'month'" style="border-radius: 4px 0 0 4px;" @click="changeDate(1)">日</p>
<p :class="chooseDate ? 'month' : 'day'" @click="changeDate(0)">月</p> <p :class="chooseDate ? 'month' : 'day'" style="border-radius: 0 4px 4px 0;" @click="changeDate(0)">周</p>
</div> </div>
</div> </div>
</div> </div>
<div v-if="chooseDate" class="swipDiv"> <div class="content">
<van-swipe class="my-swipe" indicator-color="white"> <van-button class="arrowButton" @click="prev()"><van-icon name="arrow-left" /></van-button>
<van-swipe-item><swipe-pies></swipe-pies></van-swipe-item> <div v-if="chooseDate" class="swipDiv">
<van-swipe-item><swipe-pie></swipe-pie></van-swipe-item> <van-swipe class="my-swipe" ref="swiper" :show-indicators="false">
<van-swipe-item><swipe-bar></swipe-bar></van-swipe-item> <van-swipe-item><swipe-pies></swipe-pies></van-swipe-item>
</van-swipe> <van-swipe-item><swipe-pie></swipe-pie></van-swipe-item>
</div> <van-swipe-item><swipe-bar></swipe-bar></van-swipe-item>
<div v-else class="swipDiv"> </van-swipe>
<van-swipe class="my-swipe" indicator-color="white"> </div>
<van-swipe-item><month-pies></month-pies></van-swipe-item> <div v-else class="swipDiv">
<van-swipe-item><month-pie></month-pie></van-swipe-item> <van-swipe class="my-swipe" ref="weekSwiper" :show-indicators="false">
<van-swipe-item><month-bar></month-bar></van-swipe-item> <van-swipe-item><month-pies></month-pies></van-swipe-item>
</van-swipe> <van-swipe-item><month-pie></month-pie></van-swipe-item>
<van-swipe-item><month-bar></month-bar></van-swipe-item>
</van-swipe>
</div>
<van-button class="arrowRightButton" @click="next()"><van-icon name="arrow" /></van-button>
</div> </div>
</div> </div>
</template> </template>
@ -62,6 +66,20 @@ export default {
methods: { methods: {
changeDate (date) { changeDate (date) {
this.chooseDate = date this.chooseDate = date
},
prev () {
if (this.chooseDate === 1) {
this.$refs.swiper.prev()
} else {
this.$refs.weekSwiper.prev()
}
},
next () {
if (this.chooseDate === 1) {
this.$refs.swiper.next()
} else {
this.$refs.weekSwiper.next()
}
} }
} }
} }
@ -112,7 +130,6 @@ export default {
height: 8.4vh; height: 8.4vh;
width: 0.64rem; width: 0.64rem;
background-color: #4E9AFF; background-color: #4E9AFF;
border-radius: 2px;
border: #4E9AFF 1px solid; border: #4E9AFF 1px solid;
} }
@ -121,19 +138,48 @@ export default {
width: 0.64rem; width: 0.64rem;
background-color: #276BFF; background-color: #276BFF;
border: #88ADFF 1px solid; border: #88ADFF 1px solid;
border-radius: 2px;
margin-left: -0.05rem;
} }
} }
} }
} }
.swipDiv{ .content{
// display: flex;
width: 100%; width: 100%;
.my-swipe .van-swipe-item { .arrowButton{
color: #fff; position: fixed;
height: 67vh; z-index: 999;
text-align: center; top: 15vh;
margin-top: 0.1rem;
left: 0;
padding: 10px;
height: 63vh;
width: 0.2rem;
border: none;
background-color: rgba($color: #e0e0e0, $alpha: 0);
}
.arrowRightButton{
position: fixed;
z-index: 999;
top: 15vh;
margin-top: 0.1rem;
right: 0;
padding: 10px;
height: 63vh;
width: 0.2rem;
border: none;
background-color: rgba($color: #e0e0e0, $alpha: 0);
}
.swipDiv{
width: 100%;
.my-swipe .van-swipe-item {
color: #fff;
height: 67vh;
text-align: center;
}
} }
} }
</style> </style>