lb #12
@ -96,15 +96,45 @@
|
|||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
|
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
|
||||||
<div style="position: absolute; top: 0; left:0; width: 100%; height: 100%;">
|
<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>
|
||||||
<div class="pl-select">
|
<div class="pl-select">
|
||||||
<span :class="{ 'pl-select__active': plMode === 'a' }" @click="plMode = 'a'">A</span>
|
<span
|
||||||
<span :class="{ 'pl-select__active': plMode === 'b' }" @click="plMode = 'b'">B</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>
|
||||||
<div class="date-select">
|
<div class="date-select">
|
||||||
<span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
|
<span
|
||||||
<span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
|
: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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -215,6 +245,41 @@ export default {
|
|||||||
NewLineStack
|
NewLineStack
|
||||||
},
|
},
|
||||||
data() {
|
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 {
|
return {
|
||||||
plMode: 'a',
|
plMode: 'a',
|
||||||
dateMode: 'month',
|
dateMode: 'month',
|
||||||
@ -234,7 +299,9 @@ export default {
|
|||||||
{ name: '包装', amount: 20 },
|
{ name: '包装', amount: 20 },
|
||||||
{ name: '清晰', amount: 20 },
|
{ name: '清晰', amount: 20 },
|
||||||
{ name: '物流仓储', amount: 233920 }
|
{ name: '物流仓储', amount: 233920 }
|
||||||
]
|
],
|
||||||
|
quexianDatalist,
|
||||||
|
chosenDatalist: quexianDatalist[0]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -13,6 +13,10 @@ export default {
|
|||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'default-fault-analysis-id'
|
default: 'default-fault-analysis-id'
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
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 {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
// default configs
|
// default configs
|
||||||
@ -115,7 +110,7 @@ export default {
|
|||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
left: '69%',
|
left: '69%',
|
||||||
top: '46%',
|
top: '46%',
|
||||||
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
|
text: '',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
@ -137,9 +132,8 @@ export default {
|
|||||||
icon: 'none',
|
icon: 'none',
|
||||||
itemGap: 5,
|
itemGap: 5,
|
||||||
itemWidth: 10,
|
itemWidth: 10,
|
||||||
formatter: function(name) {
|
formatter: name => {
|
||||||
// test data - dynamic
|
const testData = this.dataList
|
||||||
const testData = demoData
|
|
||||||
|
|
||||||
let pieLegendVale = {}
|
let pieLegendVale = {}
|
||||||
testData.filter((item, index) => {
|
testData.filter((item, index) => {
|
||||||
@ -262,12 +256,21 @@ export default {
|
|||||||
return colorGradient
|
return colorGradient
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: demoData
|
data: this.dataList
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
dataList: function(val) {
|
||||||
|
if (val && Array.isArray(val) && val.length) {
|
||||||
|
this.applyChartOption(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
@ -292,17 +295,15 @@ export default {
|
|||||||
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
return beilv * baseSize
|
return beilv * baseSize
|
||||||
},
|
},
|
||||||
// calcRate(baseRate) {
|
|
||||||
// const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
applyChartOption(datalist) {
|
||||||
// return baseRate * beilv
|
|
||||||
// },
|
|
||||||
applyChartOption() {
|
|
||||||
const fs5 = this.calcFontsize(5 /** px*/)
|
const fs5 = this.calcFontsize(5 /** px*/)
|
||||||
const fs10 = this.calcFontsize(10 /** px*/)
|
const fs10 = this.calcFontsize(10 /** px*/)
|
||||||
const fs14 = this.calcFontsize(14 /** px*/)
|
const fs14 = this.calcFontsize(14 /** px*/)
|
||||||
const fs18 = this.calcFontsize(18 /** px*/)
|
const fs18 = this.calcFontsize(18 /** px*/)
|
||||||
const legendTopRate = this.calcFontsize(28 /** % */)
|
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.textStyle.fontSize = fs18
|
||||||
this.configs.title.subtextStyle.fontSize = fs14
|
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.fourth.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
this.configs.series[0].label.rich.fifth.fontSize = fs10
|
||||||
this.configs.series[0].label.rich.sixth.fontSize = fs10
|
this.configs.series[0].label.rich.sixth.fontSize = fs10
|
||||||
|
if (datalist) this.configs.series[0].data = datalist
|
||||||
this.chart.setOption(this.configs)
|
this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user