@@ -2,7 +2,7 @@ | |||
* @Author: gtz | |||
* @Date: 2022-07-25 14:18:00 | |||
* @LastEditors: DY | |||
* @LastEditTime: 2022-09-07 09:21:31 | |||
* @LastEditTime: 2022-09-16 14:13:07 | |||
* @Description: file content | |||
* @FilePath: \hf-pda\src\main.js | |||
*/ | |||
@@ -20,9 +20,9 @@ import './assets/css/iconfont.css' | |||
import './components/' | |||
import store from '@/store' | |||
import { Button, Field, Icon, Dialog, Grid, GridItem, NavBar, Popup, Row, Col, Stepper, Picker, DatetimePicker, PullRefresh, Cell, CellGroup, Tag, Checkbox, CheckboxGroup, Tab, Tabs, Sticky, Calendar, Uploader, SwipeCell, Radio, RadioGroup } from 'vant' | |||
import { Button, Field, Icon, Dialog, Grid, GridItem, NavBar, Popup, Row, Col, Stepper, Picker, DatetimePicker, PullRefresh, Cell, CellGroup, Tag, Checkbox, CheckboxGroup, Tab, Tabs, Sticky, Calendar, Uploader, SwipeCell, Radio, RadioGroup, Swipe, SwipeItem } from 'vant' | |||
Vue.use(Button).use(Field).use(Icon).use(Dialog).use(Grid).use(GridItem).use(NavBar).use(Popup).use(Row).use(Col).use(Stepper).use(Picker).use(DatetimePicker).use(PullRefresh).use(Cell).use(CellGroup).use(Tag).use(Checkbox).use(CheckboxGroup).use(Tab).use(Tabs).use(Sticky).use(Calendar).use(Uploader).use(SwipeCell).use(Radio).use(RadioGroup) | |||
Vue.use(Button).use(Field).use(Icon).use(Dialog).use(Grid).use(GridItem).use(NavBar).use(Popup).use(Row).use(Col).use(Stepper).use(Picker).use(DatetimePicker).use(PullRefresh).use(Cell).use(CellGroup).use(Tag).use(Checkbox).use(CheckboxGroup).use(Tab).use(Tabs).use(Sticky).use(Calendar).use(Uploader).use(SwipeCell).use(Radio).use(RadioGroup).use(Swipe).use(SwipeItem) | |||
// const vConsole = new Vconsole() | |||
@@ -97,15 +97,14 @@ export default { | |||
color: white; | |||
} | |||
.un-button{ | |||
font-size: 0.1px; | |||
margin: 0.15rem auto 0 auto; | |||
margin: 2.5vh auto 0 auto; | |||
width: 0.64rem; | |||
height: 0.57rem; | |||
height: 13vh; | |||
color: #0B58FF; | |||
// text-align: center; | |||
} | |||
.van-button{ | |||
margin-top: -0.25rem; | |||
margin-top: -5.5vh; | |||
background-color: #0B58FF; | |||
color: white; | |||
width: 0.64rem; | |||
@@ -121,16 +120,19 @@ export default { | |||
} | |||
.nav-div{ | |||
// background-image: url('../../assets/img/nav.png'); | |||
background-size: 100% 0.727rem; | |||
background-size: 100% 17vh; | |||
background-repeat: no-repeat; | |||
position: absolute; | |||
bottom: 0px; | |||
width: 100%; | |||
height: 0.762rem; | |||
height: 17vh; | |||
font-size: 0.1rem; | |||
} | |||
.index{ | |||
// width: 100vh; | |||
height: 4.21rem; | |||
height: 100vh; | |||
overflow: hidden; | |||
overflow-y: auto; | |||
background-color: #EDEFF0; | |||
} | |||
</style> |
@@ -217,12 +217,12 @@ export default { | |||
} | |||
.top{ | |||
// width: 100%; | |||
height: 0.64rem; | |||
height: 15vh; | |||
background: #276BFF; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 0 0.2rem; | |||
padding: 0 4.7vh; | |||
p{ | |||
font-size: 0.247rem; | |||
@@ -241,7 +241,7 @@ export default { | |||
.description{ | |||
font-size: 0.1rem; | |||
opacity: 0.7; | |||
margin-top: 0.05rem; | |||
margin-top: 1.1vh; | |||
} | |||
.right{ | |||
@@ -255,38 +255,38 @@ export default { | |||
} | |||
.middle { | |||
width: 6.89rem; | |||
height: 2.6rem; | |||
margin: 0.09rem auto; | |||
height: 61vh; | |||
margin: 2.4vh auto; | |||
background-color: white; | |||
.week { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: white; | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.4vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.181rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.4vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
span:first-child { | |||
@@ -307,37 +307,37 @@ export default { | |||
} | |||
.day { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: rgba(197, 199, 206, 0.55); | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.4vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.4vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
@@ -349,37 +349,37 @@ export default { | |||
} | |||
.pass { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: white; | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.4vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.4vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
@@ -403,37 +403,37 @@ export default { | |||
} | |||
.energy { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: rgba(197, 199, 206, 0.55); | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.4vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.4vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
@@ -445,37 +445,37 @@ export default { | |||
} | |||
.unit { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: white; | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.4vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.4vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
@@ -499,37 +499,37 @@ export default { | |||
} | |||
.equipment { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.7vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: rgba(197, 199, 206, 0.55); | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.4vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.4vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
@@ -541,37 +541,37 @@ export default { | |||
} | |||
.monitor { | |||
width: 100%; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
li { | |||
float: left; | |||
height: 0.37rem; | |||
height: 8.6vh; | |||
width: 1.362rem; | |||
background-color: white; | |||
margin-right: 0.016rem; | |||
h2 { | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
text-align: center; | |||
margin-top: 0.11rem; | |||
margin-top: 2.5vh; | |||
color: rgba(19, 20, 21, 0.85); | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
div { | |||
margin-left: 0.1rem; | |||
margin-top: 0.03rem; | |||
margin-top: 0.7vh; | |||
span { | |||
font-size: 0.158rem; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #ff4d4f; | |||
line-height: 0.181rem; | |||
margin-top: 0.1rem; | |||
line-height: 4.2vh; | |||
margin-top: 2.3vh; | |||
text-shadow: 0.09rem 0rem 0.181rem rgba(197, 199, 206, 0.55); | |||
} | |||
@@ -0,0 +1,187 @@ | |||
<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="bar" class="bar"></div> | |||
</div> | |||
<div class="card" style="border-bottom-left-radius: 20%"> | |||
<p class="chartTitle">B产线</p> | |||
<div class="imgcss"> | |||
<div class="img-left"></div> | |||
<div class="img-right"></div> | |||
</div> | |||
<div id="pie" class="bar"></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
export default { | |||
data () { | |||
return { | |||
chart: null | |||
} | |||
}, | |||
mounted () { | |||
this.initChart() | |||
this.pieChart() | |||
}, | |||
methods: { | |||
beforeDestroy () { | |||
if (!this.chart) { | |||
return | |||
} | |||
this.chart.dispose() | |||
this.chart = null | |||
}, | |||
initChart () { | |||
echarts.init(document.getElementById('bar')).setOption( | |||
{ | |||
tooltip: { | |||
trigger: 'item' | |||
}, | |||
legend: { | |||
orient: 'vertical', | |||
icon: 'circle', | |||
top: '15%', | |||
right: '10%' | |||
}, | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
center: ['35%', '43%'], | |||
type: 'pie', | |||
radius: '75%', | |||
avoidLabelOverlap: false, | |||
label: { | |||
show: false, | |||
position: 'center' | |||
}, | |||
emphasis: { | |||
label: { | |||
show: true, | |||
fontSize: '20', | |||
fontWeight: 'bold' | |||
} | |||
}, | |||
labelLine: { | |||
show: false | |||
}, | |||
data: [ | |||
{ value: 123, name: '擦划伤' }, | |||
{ value: 122, name: '脏污' }, | |||
{ value: 67, name: '崩边' }, | |||
{ value: 42, name: '气泡' }, | |||
{ value: 12, name: '凹凸物' } | |||
] | |||
} | |||
] | |||
} | |||
) | |||
}, | |||
pieChart () { | |||
echarts.init(document.getElementById('pie')).setOption( | |||
{ | |||
tooltip: { | |||
trigger: 'item' | |||
}, | |||
legend: { | |||
orient: 'vertical', | |||
icon: 'circle', | |||
top: '15%', | |||
right: '10%' | |||
}, | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
center: ['35%', '45%'], | |||
type: 'pie', | |||
radius: ['50%', '75%'], | |||
avoidLabelOverlap: false, | |||
label: { | |||
show: false, | |||
position: 'center' | |||
}, | |||
emphasis: { | |||
label: { | |||
show: true, | |||
fontSize: '20', | |||
fontWeight: 'bold' | |||
} | |||
}, | |||
labelLine: { | |||
show: false | |||
}, | |||
data: [ | |||
{ value: 123, name: '擦划伤' }, | |||
{ value: 122, name: '脏污' }, | |||
{ value: 67, name: '崩边' }, | |||
{ value: 42, name: '气泡' }, | |||
{ value: 12, name: '凹凸物' } | |||
] | |||
} | |||
] | |||
} | |||
) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.content{ | |||
display: flex; | |||
justify-content: space-around; | |||
margin-top: 0.1rem; | |||
font-size: 0.135rem; | |||
.card{ | |||
width: 3.4rem; | |||
height: 63vh; | |||
background-color: white; | |||
border-radius: 5%; | |||
text-align: center; | |||
color: #276BFF; | |||
font-size: 0.16rem; | |||
font-weight: 600; | |||
opacity: 0.8; | |||
.chartTitle{ | |||
margin: 5vh auto 0.5vh 0.25rem; | |||
text-align: left; | |||
} | |||
.imgcss{ | |||
display: flex; | |||
width: 0.8rem; | |||
height: 0.8vh; | |||
margin-left: 0.25rem; | |||
.img-left{ | |||
width: 0.1rem; | |||
background-color: #276BFF; | |||
} | |||
.img-right{ | |||
width: 0.64rem; | |||
margin-left: 0.01rem; | |||
// background-color: #276BFF; | |||
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%); | |||
} | |||
} | |||
} | |||
.bar{ | |||
width: 3.4rem; | |||
height: 60vh; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,187 @@ | |||
<template> | |||
<div class="content"> | |||
<div class="card" style="border-bottom-right-radius: 20%"> | |||
<p class="chartTitle">C产线</p> | |||
<div class="imgcss"> | |||
<div class="img-left"></div> | |||
<div class="img-right"></div> | |||
</div> | |||
<div id="pie1" class="bar"></div> | |||
</div> | |||
<div class="card" style="border-bottom-left-radius: 20%"> | |||
<p class="chartTitle">D产线</p> | |||
<div class="imgcss"> | |||
<div class="img-left"></div> | |||
<div class="img-right"></div> | |||
</div> | |||
<div id="pie2" class="bar"></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
export default { | |||
data () { | |||
return { | |||
chart: null | |||
} | |||
}, | |||
mounted () { | |||
this.pieChart1() | |||
this.pieChart2() | |||
}, | |||
methods: { | |||
beforeDestroy () { | |||
if (!this.chart) { | |||
return | |||
} | |||
this.chart.dispose() | |||
this.chart = null | |||
}, | |||
pieChart1 () { | |||
echarts.init(document.getElementById('pie1')).setOption( | |||
{ | |||
tooltip: { | |||
trigger: 'item' | |||
}, | |||
legend: { | |||
orient: 'vertical', | |||
icon: 'circle', | |||
top: '15%', | |||
right: '10%' | |||
}, | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
center: ['35%', '43%'], | |||
type: 'pie', | |||
radius: '75%', | |||
avoidLabelOverlap: false, | |||
label: { | |||
show: false, | |||
position: 'center' | |||
}, | |||
emphasis: { | |||
label: { | |||
show: true, | |||
fontSize: '20', | |||
fontWeight: 'bold' | |||
} | |||
}, | |||
labelLine: { | |||
show: false | |||
}, | |||
data: [ | |||
{ value: 123, name: '擦划伤' }, | |||
{ value: 122, name: '脏污' }, | |||
{ value: 67, name: '崩边' }, | |||
{ value: 42, name: '气泡' }, | |||
{ value: 12, name: '凹凸物' } | |||
] | |||
} | |||
] | |||
} | |||
) | |||
}, | |||
pieChart2 () { | |||
echarts.init(document.getElementById('pie2')).setOption( | |||
{ | |||
tooltip: { | |||
trigger: 'item' | |||
}, | |||
legend: { | |||
orient: 'vertical', | |||
icon: 'circle', | |||
top: '15%', | |||
right: '10%' | |||
}, | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
center: ['35%', '43%'], | |||
type: 'pie', | |||
radius: '75%', | |||
avoidLabelOverlap: false, | |||
label: { | |||
show: false, | |||
position: 'center' | |||
}, | |||
emphasis: { | |||
label: { | |||
show: true, | |||
fontSize: '20', | |||
fontWeight: 'bold' | |||
} | |||
}, | |||
labelLine: { | |||
show: false | |||
}, | |||
data: [ | |||
{ value: 123, name: '擦划伤' }, | |||
{ value: 122, name: '脏污' }, | |||
{ value: 67, name: '崩边' }, | |||
{ value: 42, name: '气泡' }, | |||
{ value: 12, name: '凹凸物' } | |||
] | |||
} | |||
] | |||
} | |||
) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.content{ | |||
display: flex; | |||
justify-content: space-around; | |||
margin-top: 0.1rem; | |||
font-size: 0.135rem; | |||
.card{ | |||
width: 3.4rem; | |||
height: 63vh; | |||
background-color: white; | |||
border-radius: 5%; | |||
text-align: center; | |||
color: #276BFF; | |||
font-size: 0.16rem; | |||
font-weight: 600; | |||
opacity: 0.8; | |||
.chartTitle{ | |||
margin: 5vh auto 0.5vh 0.25rem; | |||
text-align: left; | |||
} | |||
.imgcss{ | |||
display: flex; | |||
width: 0.8rem; | |||
height: 0.8vh; | |||
margin-left: 0.25rem; | |||
.img-left{ | |||
width: 0.1rem; | |||
background-color: #276BFF; | |||
} | |||
.img-right{ | |||
width: 0.64rem; | |||
margin-left: 0.01rem; | |||
// background-color: #276BFF; | |||
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%); | |||
} | |||
} | |||
} | |||
.bar{ | |||
width: 3.4rem; | |||
height: 60vh; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,184 @@ | |||
<template> | |||
<div class="content"> | |||
<div class="card" style="border-bottom-right-radius: 20%"> | |||
<p class="chartTitle">E产线</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%"> | |||
<p class="chartTitle">缺陷总量排名</p> | |||
<div class="imgcss"> | |||
<div class="img-left"></div> | |||
<div class="img-right"></div> | |||
</div> | |||
<div id="barDiv" class="bar"></div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
export default { | |||
data () { | |||
return { | |||
chart: null | |||
} | |||
}, | |||
mounted () { | |||
this.initChart() | |||
this.pieChart() | |||
}, | |||
methods: { | |||
beforeDestroy () { | |||
if (!this.chart) { | |||
return | |||
} | |||
this.chart.dispose() | |||
this.chart = null | |||
}, | |||
initChart () { | |||
this.chart = echarts.init(document.getElementById('barDiv')) | |||
this.chart.setOption( | |||
{ | |||
grid: { | |||
left: 50, | |||
top: 23 | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
axisLabel: { | |||
interval: 0, | |||
rotate: 40 | |||
}, | |||
data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物'] | |||
}, | |||
yAxis: { | |||
type: 'value' | |||
}, | |||
series: [{ | |||
data: [518, 400, 289, 123, 24], | |||
type: 'bar', | |||
showBackground: true, | |||
barWidth: '35%', | |||
label: { | |||
show: true, | |||
position: 'top' | |||
}, | |||
itemStyle: { | |||
normal: { | |||
color: function (params) { | |||
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'] | |||
return colorList[params.dataIndex] | |||
} | |||
} | |||
}, | |||
backgroundStyle: { | |||
color: 'rgba(220, 220, 220, 0.4)' | |||
} | |||
}] | |||
} | |||
) | |||
}, | |||
pieChart () { | |||
echarts.init(document.getElementById('pieDiv')).setOption( | |||
{ | |||
tooltip: { | |||
trigger: 'item' | |||
}, | |||
legend: { | |||
orient: 'vertical', | |||
icon: 'circle', | |||
top: '15%', | |||
right: '10%' | |||
}, | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
center: ['35%', '43%'], | |||
type: 'pie', | |||
radius: '75%', | |||
avoidLabelOverlap: false, | |||
label: { | |||
show: false, | |||
position: 'center' | |||
}, | |||
emphasis: { | |||
label: { | |||
show: true, | |||
fontSize: '20', | |||
fontWeight: 'bold' | |||
} | |||
}, | |||
labelLine: { | |||
show: false | |||
}, | |||
data: [ | |||
{ value: 123, name: '擦划伤' }, | |||
{ value: 122, name: '脏污' }, | |||
{ value: 67, name: '崩边' }, | |||
{ value: 42, name: '气泡' }, | |||
{ value: 12, name: '凹凸物' } | |||
] | |||
} | |||
] | |||
} | |||
) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.content{ | |||
display: flex; | |||
justify-content: space-around; | |||
margin-top: 0.1rem; | |||
font-size: 0.135rem; | |||
.card{ | |||
width: 3.4rem; | |||
height: 63vh; | |||
background-color: white; | |||
border-radius: 5%; | |||
text-align: center; | |||
color: #276BFF; | |||
font-size: 0.16rem; | |||
font-weight: 600; | |||
opacity: 0.8; | |||
.chartTitle{ | |||
margin: 5vh auto 0.5vh 0.25rem; | |||
text-align: left; | |||
} | |||
.imgcss{ | |||
display: flex; | |||
width: 0.8rem; | |||
height: 0.8vh; | |||
margin-left: 0.25rem; | |||
.img-left{ | |||
width: 0.1rem; | |||
background-color: #276BFF; | |||
} | |||
.img-right{ | |||
width: 0.64rem; | |||
margin-left: 0.01rem; | |||
// background-color: #276BFF; | |||
background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%); | |||
} | |||
} | |||
} | |||
.bar{ | |||
width: 3.4rem; | |||
height: 60vh; | |||
} | |||
} | |||
</style> |
@@ -17,7 +17,7 @@ | |||
<p>质量缺陷</p> | |||
<div class="right"> | |||
<div> | |||
<p style="font-size: 0.1rem;">2022.12.24</p> | |||
<p style="font-size: 0.1rem; opacity: 0.8;">2022.12.24</p> | |||
<p style="font-size: 0.142rem;">23.12</p> | |||
</div> | |||
<div class="date"> | |||
@@ -26,15 +26,21 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="content"> | |||
<div id="bar" class="bar" style="border-bottom-right-radius: 20%"></div> | |||
<div id="pie" class="bar" style="border-bottom-left-radius: 20%"></div> | |||
<div class="swipDiv"> | |||
<van-swipe class="my-swipe" indicator-color="white"> | |||
<van-swipe-item><swipe-bar></swipe-bar></van-swipe-item> | |||
<van-swipe-item><swipe-pie></swipe-pie></van-swipe-item> | |||
<van-swipe-item><swipe-pies></swipe-pies></van-swipe-item> | |||
</van-swipe> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
import SwipeBar from './components/swipeBar.vue' | |||
import SwipePie from './components/swipePie.vue' | |||
import SwipePies from './components/swipePies.vue' | |||
export default { | |||
data () { | |||
@@ -42,9 +48,10 @@ export default { | |||
chart: null | |||
} | |||
}, | |||
components: { SwipeBar, SwipePie, SwipePies }, | |||
mounted () { | |||
this.initChart() | |||
this.pieChart() | |||
// this.initChart() | |||
// this.pieChart() | |||
}, | |||
methods: { | |||
beforeDestroy () { | |||
@@ -58,17 +65,9 @@ export default { | |||
this.chart = echarts.init(document.getElementById('bar')) | |||
this.chart.setOption( | |||
{ | |||
title: { | |||
text: '总量排名', | |||
textStyle: { | |||
color: '#276BFF' | |||
}, | |||
top: '1%', | |||
left: '2%' | |||
}, | |||
grid: { | |||
left: 50, | |||
bottom: 60 | |||
top: 23 | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
@@ -93,7 +92,7 @@ export default { | |||
itemStyle: { | |||
normal: { | |||
color: function (params) { | |||
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#CCCCCC', '#FFD160', '#FF8A40'] | |||
var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'] | |||
return colorList[params.dataIndex] | |||
} | |||
} | |||
@@ -111,24 +110,17 @@ export default { | |||
tooltip: { | |||
trigger: 'item' | |||
}, | |||
title: { | |||
text: 'B产线', | |||
textStyle: { | |||
color: '#276BFF' | |||
}, | |||
top: '1%', | |||
left: '2%' | |||
}, | |||
legend: { | |||
orient: 'vertical', | |||
top: 'center', | |||
right: '5%' | |||
icon: 'circle', | |||
top: '15%', | |||
right: '10%' | |||
}, | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#CCCCCC', '#FFD160', '#FF8A40'], | |||
color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'], | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
center: ['35%', '53%'], | |||
center: ['35%', '45%'], | |||
type: 'pie', | |||
radius: ['50%', '70%'], | |||
avoidLabelOverlap: false, | |||
@@ -164,8 +156,7 @@ export default { | |||
<style lang="scss" scoped> | |||
.top{ | |||
// width: 100%; | |||
height: 0.64rem; | |||
height: 15vh; | |||
background: #276BFF; | |||
display: flex; | |||
justify-content: space-between; | |||
@@ -188,7 +179,7 @@ export default { | |||
.description{ | |||
font-size: 0.1rem; | |||
opacity: 0.7; | |||
margin-top: 0.05rem; | |||
margin-top: 1vh; | |||
} | |||
.right{ | |||
@@ -202,37 +193,33 @@ export default { | |||
display: flex; | |||
text-align: center; | |||
align-items: center; | |||
line-height: 0.36rem; | |||
line-height: 8.4vh; | |||
.day{ | |||
height: 0.36rem; | |||
height: 8.4vh; | |||
width: 0.64rem; | |||
background-color: #4E9AFF; | |||
border-radius: 5px; | |||
border-radius: 3px 0 0 3px; | |||
border: #4E9AFF 1px solid; | |||
} | |||
.month{ | |||
height: 0.36rem; | |||
height: 8.4vh; | |||
width: 0.64rem; | |||
background-color: #276BFF; | |||
border: #88ADFF 1px solid; | |||
border-radius: 5px; | |||
border-radius: 0 3px 3px 0; | |||
margin-left: -0.05rem; | |||
} | |||
} | |||
} | |||
} | |||
.content{ | |||
display: flex; | |||
justify-content: space-around; | |||
margin-top: 0.1rem; | |||
font-size: 0.135rem; | |||
.swipDiv{ | |||
width: 100%; | |||
.bar{ | |||
width: 3.4rem; | |||
height: 2.66rem; | |||
background-color: white; | |||
border-radius: 5%; | |||
.my-swipe .van-swipe-item { | |||
color: #fff; | |||
height: 67vh; | |||
text-align: center; | |||
} | |||
} | |||
@@ -115,23 +115,23 @@ export default { | |||
} | |||
.top { | |||
width: 100%; | |||
height: 1.1rem; | |||
height: 25vh; | |||
overflow: hidden; | |||
display: flex; | |||
.left{ | |||
float: left; | |||
img{ | |||
width: 1.96rem; | |||
margin-top: 0.329rem; | |||
margin-top: 7.7vh; | |||
margin-left: 0.238rem; | |||
} | |||
} | |||
.topMiddle{ | |||
color: white; | |||
margin-top: 0.181rem; | |||
margin-top: 4vh; | |||
width: 2.68rem; | |||
float: left; | |||
height: 0.378rem; | |||
height: 8.8vh; | |||
.base{ | |||
margin-left: 0.181rem; | |||
img{ | |||
@@ -139,7 +139,7 @@ export default { | |||
} | |||
span{ | |||
width: 1.862rem; | |||
height: 0.135rem; | |||
height: 3.1vh; | |||
font-size: 0.15rem; | |||
text-align: center; | |||
font-family: PingFangSC-Semibold, PingFang SC; | |||
@@ -151,7 +151,7 @@ export default { | |||
.factory{ | |||
width: 2.68rem; | |||
text-align: center; | |||
height: 0.181rem; | |||
height: 4.2vh; | |||
font-size: 0.181rem; | |||
font-family: PingFangSC-Semibold, PingFang SC; | |||
font-weight: 600; | |||
@@ -163,24 +163,25 @@ export default { | |||
float:left; | |||
.rightLogo { | |||
width: 1.5rem; | |||
margin-top: 0.329rem; | |||
margin-top: 7vh; | |||
} | |||
.user{ | |||
margin: 0.18rem auto auto 0.4rem; | |||
margin: 4.5vh auto auto 0.5rem; | |||
width: 0.363rem; | |||
height: 0.363rem; | |||
} | |||
} | |||
} | |||
.middle { | |||
width: 100%; | |||
height: 2.58rem; | |||
width: 100vw; | |||
height: 66vh; | |||
background: url("../../assets/img/background.png") no-repeat; | |||
background-size: 100% 100%; | |||
overflow: hidden; | |||
img{ | |||
width: 100%; | |||
margin-top: 0.61rem; | |||
width: 90%; | |||
margin: 14vh auto; | |||
display: block; | |||
} | |||
} | |||
</style> |