mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 质量-产线缺陷分析

Browse Source
This commit is contained in:
lb 2022-11-17 15:58:46 +08:00
parent dcdfcb9f6c
commit cb8d705309
3 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/QualityManager/HomePage.vue
View File

@ -94,8 +94,14 @@
<div class="grow-6 flex gap-16">
<div class="width-222">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产线缺陷分析</techy-analysis-header>
<pl-fault-analysis-pie-chart />
<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 />
</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>
</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'">
@ -210,6 +216,7 @@ export default {
},
data() {
return {
plMode: 'a',
dateMode: 'month',
dateMode2: 'month',
qualityTableProps,
@ -409,6 +416,7 @@ export default {
gap: calc(16px * var(--beilv));
}
.pl-select,
.date-select {
position: absolute;
top: calc(16px * var(--beilv));
@ -419,6 +427,12 @@ export default {
cursor: pointer;
}
.pl-select {
right: unset;
left: calc(10px * var(--beilv));
}
.pl-select span,
.date-select span {
display: inline-block;
width: calc(40px * var(--beilv));
@ -429,6 +443,7 @@ export default {
background-color: #31878c94;
}
.pl-select span.pl-select__active,
.date-select span.date-select__active {
background-color: #42bbb7;
}

10
src/views/QualityManager/components/TechyAnalysisHeader.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="techy-analysis-header">
<span class="top-icon">
<span v-if="showTopIcon" class="top-icon">
<svg
width="100%"
height="100%"
@ -51,7 +51,7 @@
<span class="techy-analysis-header__title">
<slot />
</span>
<span class="top-icon">
<span v-if="showTopIcon" class="top-icon">
<svg
width="100%"
height="100%"
@ -105,6 +105,12 @@
<script>
export default {
name: 'TechyAnalysisHeader',
props: {
showTopIcon: {
type: Boolean,
default: true
}
},
data() {
return {}
}

118
src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
View File

@ -44,6 +44,19 @@ export default {
],
global: false
},
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
{ color: '#49FBD600', offset: 0.1 },
{ color: '#74DC85', offset: 1 } // 浅绿
],
global: false
},
{
type: 'linear',
x: 1,
@ -59,9 +72,9 @@ export default {
},
{
type: 'linear',
x: 1,
y: 1,
x2: 0,
x: 0,
y: 0.5,
x2: 1,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
@ -73,8 +86,8 @@ export default {
{
type: 'linear',
x: 0,
y: 1,
x2: 0,
y: 0.5,
x2: 1,
y2: 0,
colorStops: [
{ color: '#FFFFFF00', offset: 0 },
@ -86,11 +99,12 @@ export default {
]
const demoData = [
{ value: 55, name: 'A' },
{ value: 33, name: 'B' },
{ value: 22, name: 'C' },
{ value: 11, name: 'D' },
{ value: 32, name: 'E' }
{ value: 107, name: '破片' },
{ value: 146, name: '崩边' },
{ value: 43, name: '脏污' },
{ value: 83, name: '划擦伤' },
{ value: 20, name: '崩孔' },
{ value: 21, name: '其他' }
]
return {
@ -99,15 +113,15 @@ export default {
configs: {
title: {
textAlign: 'center',
left: '63%',
top: '35%',
text: '33039',
left: '69%',
top: '46%',
text: demoData.reduce((prev, curr) => prev + curr.value, 0),
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal'
},
itemGap: 2,
itemGap: 5,
subtext: '总数',
subtextStyle: {
color: '#fff',
@ -116,9 +130,9 @@ export default {
}
},
legend: {
top: 0,
top: '10%',
bottom: 0,
left: -10,
left: 0,
orient: 'vertical',
icon: 'none',
itemGap: 5,
@ -133,7 +147,7 @@ export default {
pieLegendVale = item
}
})
const color = ['c', 'd', 'e', 'f', 'g']
const color = ['c', 'd', 'h', 'e', 'f', 'g']
const arr = [
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
'{b|' + pieLegendVale.name + '}',
@ -146,58 +160,51 @@ export default {
a: {
fontSize: 10,
color: 'rgba(255, 255, 255, 0.7)',
lineHeight: 16
lineHeight: 16,
width: 48,
align: 'left'
},
b: {
// verticalAlign: 'top',
// align: 'center',
width: 40,
align: 'left',
fontSize: 10,
color: 'rgba(255, 255, 255)'
},
c: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#FB418C'
// backgroundColor: '#1A99FF'
},
d: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#DDB112'
// backgroundColor: '#A691FF'
},
h: {
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#74DC85'
},
e: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#1A99FF'
// backgroundColor: '#FB418C'
},
f: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#A691FF'
// backgroundColor: '#49FBD6'
},
g: {
// verticalAlign: 'top',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
backgroundColor: '#49FBD6'
// backgroundColor: '#DDB112'
}
}
}
@ -207,12 +214,12 @@ export default {
{
name: 'PieForm',
type: 'pie',
center: ['65%', '48%'],
radius: ['60%', '85%'],
center: ['70%', '56%'],
radius: ['45%', '65%'],
avoidLabelOverlap: true,
label: {
formatter: params => {
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
const colorMap = ['first', 'second', 'sixth', 'third', 'fourth', 'fifth']
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
},
rich: {
@ -220,7 +227,8 @@ export default {
second: { color: '#DDB112', fontSize: 8 },
third: { color: '#1A99FF', fontSize: 8 },
fourth: { color: '#A691FF', fontSize: 8 },
fifth: { color: '#49FBD6', fontSize: 8 }
fifth: { color: '#49FBD6', fontSize: 8 },
sixth: { color: '#74DC85', fontSize: 8 }
}
},
labelLine: {
@ -234,7 +242,7 @@ export default {
const colorGradient = colors[dataIndex]
if (totalRate + percent < 25) {
/** 也许这里需要完善，但目前工作良好 */
(() => {})()
;(() => {})()
} else if (totalRate + percent < 50) {
colorGradient.x = 0
colorGradient.y = 0
@ -247,7 +255,7 @@ export default {
colorGradient.y2 = 0
} else if (totalRate + percent < 100) {
/** 也许这里需要完善，但目前工作良好 */
(() => {})()
;(() => {})()
}
totalRate += percent
@ -289,21 +297,17 @@ export default {
// return baseRate * beilv
// },
applyChartOption() {
const fs1 = this.calcFontsize(1 /** px*/)
const fs3 = this.calcFontsize(3 /** px*/)
const fs5 = this.calcFontsize(5 /** px*/)
const fs8 = this.calcFontsize(8 /** px*/)
const fs10 = this.calcFontsize(10 /** px*/)
const fs14 = this.calcFontsize(14 /** px*/)
const fs16 = this.calcFontsize(16 /** px*/)
const rate10 = this.calcFontsize(10 /** % */)
const rate3 = this.calcFontsize(3 /** % */)
const fs18 = this.calcFontsize(18 /** px*/)
const legendTopRate = this.calcFontsize(28 /** % */)
this.configs.title.textStyle.fontSize = fs14
this.configs.title.subtextStyle.fontSize = fs10
this.configs.title.textStyle.fontSize = fs18
this.configs.title.subtextStyle.fontSize = fs14
this.configs.legend.top = rate10 + '%'
this.configs.legend.left = rate3 + '%'
this.configs.legend.top = legendTopRate + '%'
this.configs.legend.left = 0 + '%'
this.configs.legend.itemGap = fs5
this.configs.legend.itemWidth = fs10
@ -326,12 +330,16 @@ export default {
this.configs.legend.textStyle.rich.g.width = fs10
this.configs.legend.textStyle.rich.g.height = fs10
this.configs.legend.textStyle.rich.g.borderRadius = fs5
this.configs.legend.textStyle.rich.h.width = fs10
this.configs.legend.textStyle.rich.h.height = fs10
this.configs.legend.textStyle.rich.h.borderRadius = fs5
this.configs.series[0].label.rich.first.fontSize = fs10
this.configs.series[0].label.rich.second.fontSize = fs10
this.configs.series[0].label.rich.third.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.sixth.fontSize = fs10
this.chart.setOption(this.configs)
}
@ -341,9 +349,13 @@ export default {
<style scoped>
.chartContainer {
height: calc(100% - (36px * var(--beilv)));
position: relative;
/* height: calc(100% - (36px * var(--beilv))); */
/* position: relative; */
/* position: absolute;
top: 0;
left: 0; */
width: 100%;
height: 100%;
}
.chartContainer > div {