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

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

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

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

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

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

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