lb #12
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {}
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user