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