update 质量-产线缺陷分析
This commit is contained in:
parent
cb8d705309
commit
934d308730
@ -96,15 +96,45 @@
|
||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
|
||||
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
||||
<pl-fault-analysis-pie-chart />
|
||||
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
||||
</div>
|
||||
<div class="pl-select">
|
||||
<span :class="{ 'pl-select__active': plMode === 'a' }" @click="plMode = 'a'">A</span>
|
||||
<span :class="{ 'pl-select__active': plMode === 'b' }" @click="plMode = 'b'">B</span>
|
||||
<span
|
||||
:class="{ 'pl-select__active': plMode === 'a' }"
|
||||
@click="
|
||||
plMode = 'a'
|
||||
chosenDatalist = quexianDatalist[0]
|
||||
"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<span
|
||||
:class="{ 'pl-select__active': plMode === 'b' }"
|
||||
@click="
|
||||
plMode = 'b'
|
||||
chosenDatalist = quexianDatalist[1]
|
||||
"
|
||||
>
|
||||
B
|
||||
</span>
|
||||
</div>
|
||||
<div class="date-select">
|
||||
<span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
|
||||
<span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
|
||||
<span
|
||||
:class="{ 'date-select__active': dateMode === 'day' }"
|
||||
@click="
|
||||
dateMode = 'day'
|
||||
chosenDatalist = quexianDatalist[2]
|
||||
"
|
||||
>
|
||||
日
|
||||
</span>
|
||||
<span
|
||||
:class="{ 'date-select__active': dateMode === 'month' }"
|
||||
@click="
|
||||
dateMode = 'month'
|
||||
chosenDatalist = quexianDatalist[3]
|
||||
"
|
||||
>
|
||||
月
|
||||
</span>
|
||||
</div>
|
||||
@ -215,6 +245,41 @@ export default {
|
||||
NewLineStack
|
||||
},
|
||||
data() {
|
||||
const quexianDatalist = [
|
||||
[
|
||||
{ value: 107, name: '破片' },
|
||||
{ value: 146, name: '崩边' },
|
||||
{ value: 43, name: '脏污' },
|
||||
{ value: 83, name: '划擦伤' },
|
||||
{ value: 20, name: '崩孔' },
|
||||
{ value: 21, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 117, name: '破片' },
|
||||
{ value: 106, name: '崩边' },
|
||||
{ value: 40, name: '脏污' },
|
||||
{ value: 82, name: '划擦伤' },
|
||||
{ value: 22, name: '崩孔' },
|
||||
{ value: 19, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 97, name: '破片' },
|
||||
{ value: 96, name: '崩边' },
|
||||
{ value: 33, name: '脏污' },
|
||||
{ value: 43, name: '划擦伤' },
|
||||
{ value: 10, name: '崩孔' },
|
||||
{ value: 18, name: '其他' }
|
||||
],
|
||||
[
|
||||
{ value: 127, name: '破片' },
|
||||
{ value: 156, name: '崩边' },
|
||||
{ value: 53, name: '脏污' },
|
||||
{ value: 93, name: '划擦伤' },
|
||||
{ value: 25, name: '崩孔' },
|
||||
{ value: 22, name: '其他' }
|
||||
]
|
||||
]
|
||||
|
||||
return {
|
||||
plMode: 'a',
|
||||
dateMode: 'month',
|
||||
@ -234,7 +299,9 @@ export default {
|
||||
{ name: '包装', amount: 20 },
|
||||
{ name: '清晰', amount: 20 },
|
||||
{ name: '物流仓储', amount: 233920 }
|
||||
]
|
||||
],
|
||||
quexianDatalist,
|
||||
chosenDatalist: quexianDatalist[0]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -13,6 +13,10 @@ export default {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-fault-analysis-id'
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -98,15 +102,6 @@ export default {
|
||||
}
|
||||
]
|
||||
|
||||
const demoData = [
|
||||
{ value: 107, name: '破片' },
|
||||
{ value: 146, name: '崩边' },
|
||||
{ value: 43, name: '脏污' },
|
||||
{ value: 83, name: '划擦伤' },
|
||||
{ value: 20, name: '崩孔' },
|
||||
{ value: 21, name: '其他' }
|
||||
]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
// default configs
|
||||
@ -115,7 +110,7 @@ export default {
|
||||
textAlign: 'center',
|
||||
left: '69%',
|
||||
top: '46%',
|
||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
||||
text: '',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
@ -137,9 +132,8 @@ export default {
|
||||
icon: 'none',
|
||||
itemGap: 5,
|
||||
itemWidth: 10,
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
const testData = demoData
|
||||
formatter: name => {
|
||||
const testData = this.dataList
|
||||
|
||||
let pieLegendVale = {}
|
||||
testData.filter((item, index) => {
|
||||
@ -262,12 +256,21 @@ export default {
|
||||
return colorGradient
|
||||
}
|
||||
},
|
||||
data: demoData
|
||||
data: this.dataList
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataList: function(val) {
|
||||
if (val && Array.isArray(val) && val.length) {
|
||||
this.applyChartOption(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.chart) {
|
||||
@ -292,17 +295,15 @@ export default {
|
||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
return beilv * baseSize
|
||||
},
|
||||
// calcRate(baseRate) {
|
||||
// const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||
// return baseRate * beilv
|
||||
// },
|
||||
applyChartOption() {
|
||||
|
||||
applyChartOption(datalist) {
|
||||
const fs5 = this.calcFontsize(5 /** px*/)
|
||||
const fs10 = this.calcFontsize(10 /** px*/)
|
||||
const fs14 = this.calcFontsize(14 /** px*/)
|
||||
const fs18 = this.calcFontsize(18 /** px*/)
|
||||
const legendTopRate = this.calcFontsize(28 /** % */)
|
||||
|
||||
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value, 0)
|
||||
this.configs.title.textStyle.fontSize = fs18
|
||||
this.configs.title.subtextStyle.fontSize = fs14
|
||||
|
||||
@ -340,7 +341,7 @@ export default {
|
||||
this.configs.series[0].label.rich.fourth.fontSize = fs10
|
||||
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
||||
this.configs.series[0].label.rich.sixth.fontSize = fs10
|
||||
|
||||
if (datalist) this.configs.series[0].data = datalist
|
||||
this.chart.setOption(this.configs)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user