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

update 修改质量管理

Browse Source
This commit is contained in:
lb
2022-11-14 09:21:07 +08:00
parent b32012f12f
commit 1f73240063
7 changed files with 224 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,20 @@
<template>
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
<div ref="chartContainer" class="chartContainer" />
</template>
<script>
import echarts from 'echarts'
// import 'echarts/theme/macarons'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'PlFaultAnalysisPieChart',
name: 'RightContentFaultAnalysis',
mixins: [resize],
props: {},
props: {
id: {
type: String,
default: 'default-fault-analysis-id'
}
},
data() {
let totalRate = 0
const colors = [
@@ -81,20 +85,29 @@ export default {
}
]
const demoData = [
{ value: 55, name: 'A' },
{ value: 33, name: 'B' },
{ value: 22, name: 'C' },
{ value: 11, name: 'D' },
{ value: 32, name: 'E' }
]
return {
chart: null,
// default configs
configs: {
title: {
textAlign: 'center',
left: '59%',
top: '30%',
left: '63%',
top: '35%',
text: '33039',
textStyle: {
color: '#fff',
fontSize: 22,
fontSize: 16,
fontWeight: 'normal'
},
itemGap: 2,
subtext: '总数',
subtextStyle: {
color: '#fff',
@@ -103,21 +116,17 @@ export default {
}
},
legend: {
height: '100%',
align: 'center',
verticalAlign: 'center',
left: 0,
top: 0,
bottom: 0,
left: -10,
orient: 'vertical',
icon: 'none',
itemGap: 5,
itemWidth: 10,
formatter: function(name) {
// test data - dynamic
const testData = [
{ name: 'A', value: 100 },
{ name: 'B', value: 200 },
{ name: 'C', value: 300 },
{ name: 'D', value: 400 },
{ name: 'E', value: 500 }
]
const testData = demoData
let pieLegendVale = {}
testData.filter((item, index) => {
if (item.name === name) {
@@ -135,20 +144,19 @@ export default {
textStyle: {
rich: {
a: {
align: 'center',
fontSize: 10,
color: 'rgba(255, 255, 255, 0.7)',
lineHeight: 16
},
b: {
// verticalAlign: 'top',
align: 'center',
// align: 'center',
fontSize: 10,
color: 'rgba(255, 255, 255)'
},
c: {
// verticalAlign: 'top',
align: 'center',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
@@ -157,7 +165,7 @@ export default {
},
d: {
// verticalAlign: 'top',
align: 'center',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
@@ -166,7 +174,7 @@ export default {
},
e: {
// verticalAlign: 'top',
align: 'center',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
@@ -175,7 +183,7 @@ export default {
},
f: {
// verticalAlign: 'top',
align: 'center',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
@@ -184,7 +192,7 @@ export default {
},
g: {
// verticalAlign: 'top',
align: 'center',
// align: 'center',
width: 10,
borderRadius: 5,
height: 10,
@@ -199,8 +207,8 @@ export default {
{
name: 'PieForm',
type: 'pie',
center: ['60%', '45%'],
radius: ['50%', '70%'],
center: ['65%', '48%'],
radius: ['60%', '85%'],
avoidLabelOverlap: true,
label: {
formatter: params => {
@@ -208,13 +216,17 @@ export default {
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
},
rich: {
first: { color: '#FB418C', fontSize: 10 },
second: { color: '#DDB112', fontSize: 10 },
third: { color: '#1A99FF', fontSize: 10 },
fourth: { color: '#A691FF', fontSize: 10 },
fifth: { color: '#49FBD6', fontSize: 10 }
first: { color: '#FB418C', fontSize: 8 },
second: { color: '#DDB112', fontSize: 8 },
third: { color: '#1A99FF', fontSize: 8 },
fourth: { color: '#A691FF', fontSize: 8 },
fifth: { color: '#49FBD6', fontSize: 8 }
}
},
labelLine: {
length: 5,
length2: 5
},
itemStyle: {
color: params => {
/** 计算渐变方向的过程，只靠 dataIndex 不太行 */
@@ -228,6 +240,11 @@ export default {
colorGradient.y = 0
colorGradient.x2 = 1
colorGradient.y2 = 1
} else if (totalRate + percent >= 50 && dataIndex == 1) {
colorGradient.x = 1
colorGradient.y = 1
colorGradient.x2 = 0
colorGradient.y2 = 0
} else if (totalRate + percent < 100) {
/** 也许这里需要完善，但目前工作良好 */
(() => {})()
@@ -237,40 +254,99 @@ export default {
return colorGradient
}
},
data: [
{ value: 100, name: 'A' },
{ value: 200, name: 'B' },
{ value: 300, name: 'C' },
{ value: 400, name: 'D' },
{ value: 500, name: 'E' }
]
data: demoData
}
]
}
}
},
mounted() {
window.addEventListener('resize', function() {
window.addEventListener('resize', () => {
if (this.chart) {
this.chart.resize()
this.$nextTick(() => {
// 重新绘制文本大小
this.applyChartOption()
})
}
})
this.$nextTick(() => {
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption(this.configs)
if (!this.chart) this.chart = echarts.init(this.$refs['chartContainer'])
this.applyChartOption()
this.chart.resize()
})
},
methods: {}
methods: {
calcFontsize(baseSize) {
const beilv = document.documentElement.style.getPropertyValue('--beilv')
return beilv * baseSize
},
// calcRate(baseRate) {
// const beilv = document.documentElement.style.getPropertyValue('--beilv')
// 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 /** % */)
this.configs.title.textStyle.fontSize = fs14
this.configs.title.subtextStyle.fontSize = fs10
this.configs.legend.top = rate10 + '%'
this.configs.legend.left = rate3 + '%'
this.configs.legend.itemGap = fs5
this.configs.legend.itemWidth = fs10
this.configs.legend.textStyle.rich.a.fontSize = fs10
this.configs.legend.textStyle.rich.a.lineHeight = fs10
this.configs.legend.textStyle.rich.b.fontSize = fs10
// this.configs.legend.textStyle.rich.b.lineHeight = fs16
this.configs.legend.textStyle.rich.c.width = fs10
this.configs.legend.textStyle.rich.c.height = fs10
this.configs.legend.textStyle.rich.c.borderRadius = fs5
this.configs.legend.textStyle.rich.d.width = fs10
this.configs.legend.textStyle.rich.d.height = fs10
this.configs.legend.textStyle.rich.d.borderRadius = fs5
this.configs.legend.textStyle.rich.e.width = fs10
this.configs.legend.textStyle.rich.e.height = fs10
this.configs.legend.textStyle.rich.e.borderRadius = fs5
this.configs.legend.textStyle.rich.f.width = fs10
this.configs.legend.textStyle.rich.f.height = fs10
this.configs.legend.textStyle.rich.f.borderRadius = fs5
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.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.chart.setOption(this.configs)
}
}
}
</script>
<style scoped>
.chartContainer >>> div {
.chartContainer {
height: calc(100% - (36px * var(--beilv)));
position: relative;
width: 100%;
}
.chartContainer > div {
width: 100% !important;
}
</style>

10
src/views/QualityManager/components/charts/newBar.vue
View File

@@ -130,7 +130,7 @@ export default {
}
]
} else {
const barWidth = 400 / 2 / this.dataList[0].data.length
const barWidth = 320 / 2 / this.dataList[0].data.length
this.series = [
{
// 柱体
@@ -167,7 +167,7 @@ export default {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
{ offset: 1, color: this.dataList[0].bottomColor }
])
},
label: {
@@ -188,7 +188,7 @@ export default {
symbol: 'circle',
symbolOffset: [0, '50%'],
symbolSize: [barWidth, 6],
itemStyle: { color: '#2c6e7d' },
itemStyle: { color: this.dataList[0].bottomColor + '9f' },
data: this.dataList[0].data
}
]
@@ -276,7 +276,7 @@ export default {
/* .fault-category-chart::before { */
content: '';
position: absolute;
bottom: calc(30px * var(--beilv));
bottom: calc(36px * var(--beilv));
left: 9%;
height: calc(32px * var(--beilv));
width: 90%;
@@ -288,7 +288,7 @@ export default {
/* .process-fault-chart::before { */
content: '';
position: absolute;
bottom: 12%;
bottom: 18%;
left: 8%;
height: calc(32px * var(--beilv));
/* bottom: calc(20px * var(--beilv));