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

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

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

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

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

41
src/pages/quality/components/swipeBar.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="bar" class="bar"></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>
<div class="imgcss">
<div class="img-left"></div>
@ -55,14 +55,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: 'center',
textBorderColor: 'none'
},
emphasis: {
label: {
@ -98,28 +98,43 @@ 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: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: 'center',
textBorderColor: 'none'
},
emphasis: {
label: {
show: true,
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 123, name: '擦划伤' },
{ value: 122, name: '脏污' },
@ -144,15 +159,15 @@ export default {
font-size: 0.135rem;
.card{
width: 3.4rem;
width: 3.62rem;
height: 63vh;
background-color: white;
border-radius: 5%;
border-radius: 14px;
text-align: center;
color: #276BFF;
font-size: 0.16rem;
font-weight: 600;
opacity: 0.8;
opacity: 0.9;
.chartTitle{
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'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: 'center',
textBorderColor: 'none'
},
emphasis: {
label: {
@ -101,14 +101,14 @@ export default {
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
series: [
{
name: 'Access From',
center: ['35%', '43%'],
type: 'pie',
radius: '75%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: 'center',
textBorderColor: 'none'
},
emphasis: {
label: {

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

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

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

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