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-18 10:05:57 +08:00
parent 3a882ba735
commit d89eb46f58
3 changed files with 195 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,39 +41,35 @@
<div class="grow-8 flex gap-16"> <div class="grow-8 flex gap-16">
<div class="grow"> <div class="grow">
<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>产线缺陷日对比</techy-analysis-header>
<new-bar <div
:xlabel-font-size="10" class="absolute top-0 left-0"
:xlabel-rotate="30" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
:name-list="[ >
'擦划伤1', <new-bar
'擦划伤2', chart-name="realtime-cost-production"
'擦划伤3', :name-list="['A', 'B', 'C', 'D', 'E', 'F']"
'擦划伤4', :data-list="[
'擦划伤5', {
'擦划伤6', topColor: 'rgba(59, 76, 118, 0.2)',
'擦划伤7', bottomColor: '#49FBD6',
'擦划伤8', name: '产线A',
'擦划伤9', data: [64, 91, 55, 65, 37, 79]
'擦划伤0', },
'擦划伤11', {
'擦划伤12' topColor: 'rgba(59, 76, 118, 0.2)',
]" bottomColor: '#31A2FF',
chart-name="fault-category" name: '产线B',
:data-list="[ data: [66, 79, 65, 54, 37, 77]
{ }
topColor: 'rgba(59, 76, 118, 0.2)', ]"
bottomColor: '#31A2FF', />
name: '库存', </div>
data: [32, 65, 65, 54, 40, 60, 64, 91, 55, 65, 37, 77]
}
]"
/>
</techy-box> </techy-box>
</div> </div>
<div class="grow"> <div class="grow">
<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>产线缺陷月对比</techy-analysis-header>
<new-bar <new-bar
chart-name="process-fault" chart-name="process-fault"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']" :name-list="['A', 'B', 'C', 'D', 'E', 'F']"

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

@ -3,7 +3,7 @@
ref="chartContainer" ref="chartContainer"
class="chartContainer" class="chartContainer"
:class="bindClass" :class="bindClass"
style="position: relative; width: 100%; height: calc(100% - 36px)" style="position: relative; width: 100%; height:100%"
/> />
</template> </template>
@ -46,19 +46,19 @@ export default {
bindClass() { bindClass() {
return { return {
'fault-category-chart': this.chartName === 'fault-category', 'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault' 'process-fault-chart': this.chartName === 'process-fault',
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
} }
} }
}, },
mounted() { mounted() {
if (this.dataList.length > 1) { if (this.dataList.length > 1) {
const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [ this.series = [
{ {
// 柱体 // 柱体
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'bar', type: 'bar',
barWidth, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[0].topColor }, { offset: 0, color: this.dataList[0].topColor },
@ -71,23 +71,40 @@ export default {
// 柱顶 // 柱顶
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
symbolOffset: [0, '-50%'], symbolOffset: ['-70%', '-50%'],
symbolSize: [30, 12], symbolSize: [20, 6],
zlevel: 2, zlevel: 2,
itemStyle: { color: this.dataList[0].topColor }, itemStyle: {
data: this.dataList[0].data color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
data: this.dataList[0].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [-12, 10],
position: 'top',
vertialAlign: 'bottom'
}
}, },
{ {
// 柱底 // 柱底
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: ['-62%', '50%'],
symbolSize: [30, 15], symbolSize: [20, 6],
itemStyle: { color: this.dataList[0].bottomColor }, itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data data: this.dataList[0].data
}, },
@ -95,7 +112,7 @@ export default {
// 柱体 // 柱体
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'bar', type: 'bar',
barWidth, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor }, { offset: 0, color: this.dataList[1].topColor },
@ -108,35 +125,51 @@ export default {
// 柱顶 // 柱顶
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
symbolOffset: [0, '-50%'], symbolOffset: ['66%', '-50%'],
symbolSize: [30, 12], symbolSize: [20, 6],
zlevel: 2, zlevel: 2,
itemStyle: { color: this.dataList[1].topColor }, itemStyle: {
data: this.dataList[1].data color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor },
{ offset: 1, color: this.dataList[1].bottomColor }
])
},
data: this.dataList[1].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [12, 10],
position: 'top',
vertialAlign: 'bottom'
}
}, },
{ {
// 柱底 // 柱底
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'pictorialBar', type: 'pictorialBar',
barWidth, barWidth: 20,
symbol: 'diamond', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: ['66%', '50%'],
symbolSize: [30, 15], symbolSize: [20, 6],
itemStyle: { color: this.dataList[1].topColor }, itemStyle: { color: this.dataList[1].bottomColor },
data: this.dataList[1].data data: this.dataList[1].data
} }
] ]
} else { } else {
const barWidth = 320 / 2 / this.dataList[0].data.length const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [ this.series = [
{ {
// 柱体 // 柱体
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'bar', type: 'bar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -157,7 +190,6 @@ export default {
// 柱顶 // 柱顶
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
symbol: 'circle', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
@ -167,11 +199,16 @@ export default {
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' }, { offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: this.dataList[0].bottomColor } { offset: 1, color: '#2c6e7d' }
]) ])
}, },
label: { label: {
color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff', color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true, show: true,
offset: [0, 10], offset: [0, 10],
position: 'top', position: 'top',
@ -183,12 +220,11 @@ export default {
// 柱底 // 柱底
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
symbol: 'circle', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: [0, '50%'],
symbolSize: [barWidth, 6], symbolSize: [barWidth, 6],
itemStyle: { color: this.dataList[0].bottomColor + '9f' }, itemStyle: { color: '#2c6e7d' },
data: this.dataList[0].data data: this.dataList[0].data
} }
] ]
@ -210,12 +246,22 @@ export default {
this.chart = echarts.init(this.$refs.chartContainer) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({ this.chart.setOption({
grid: { grid: {
top: 10, top: '24%',
left: '2%', left: '8%',
right: '2%', right: '5%',
bottom: '3%', bottom: '5%',
containLabel: true containLabel: true
}, },
legend: {
itemWidth: 8,
itemHeight: 8,
top: '7%',
right: '2%',
textStyle: {
color: '#fff9',
fontSize: 10
}
},
xAxis: { xAxis: {
type: 'category', type: 'category',
axisLine: { axisLine: {
@ -225,40 +271,77 @@ export default {
show: false show: false
}, },
axisLabel: { axisLabel: {
margin: 16,
textStyle: { textStyle: {
fontSize: this.xlabelFontSize, fontSize: this.xlabelFontSize,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}, },
margin: 20,
rotate: this.xlabelRotate rotate: this.xlabelRotate
}, },
data: this.nameList data: this.nameList
}, },
yAxis: { yAxis: [
axisLine: { {
lineStyle: { name: '单位:片',
type: 'solid', nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
color: this.dataList[0].bottomColor, type: 'value',
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色 splitNumber: 3,
width: '1' // 坐标线的宽度 axisTick: { show: false },
} onZero: true,
}, position: 'left',
axisTick: { offset: 10,
show: false axisLine: {
}, lineStyle: {
axisLabel: { type: 'solid',
textStyle: { color: this.dataList[0].bottomColor,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 // color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
} width: '1' // 坐标线的宽度
}, }
splitLine: { },
lineStyle: { axisLabel: {
type: 'dotted', textStyle: {
color: 'rgba(119, 255, 242, 0.2)' color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
} }
}, },
type: 'value' splitLine: {
}, lineStyle: {
type: 'dotted',
color: 'rgba(119, 255, 242, 0.2)'
}
},
type: 'value'
}
// {
// name: '能耗kw/h',
// nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
// type: 'value',
// splitNumber: 3,
// axisTick: { show: false },
// onZero: true,
// position: 'left',
// offset: 48,
// axisLine: {
// lineStyle: {
// type: 'solid',
// color: this.dataList[1].bottomColor,
// width: '1' // 坐标线的宽度
// }
// },
// axisLabel: {
// textStyle: {
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
// }
// },
// splitLine: {
// show: false
// // lineStyle: {
// // type: 'dotted',
// // color: 'rgba(119, 255, 242, 0.2)'
// // }
// },
// type: 'value'
// }
],
series: this.series series: this.series
}) })
} }
@ -276,27 +359,40 @@ export default {
/* .fault-category-chart::before { */ /* .fault-category-chart::before { */
content: ''; content: '';
position: absolute; position: absolute;
bottom: calc(36px * var(--beilv)); /* bottom: calc(100vh/1920 * 80);
/* top: 63%; */ left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 25px;
left: 9%; left: 9%;
height: calc(32px * var(--beilv)); height: 52px;
width: 90%; width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent); background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-35deg); transform: skew(-45deg);
z-index: 0; z-index: 0;
} }
.process-fault-chart >>> div::before { .process-fault-chart >>> div::before {
/* .process-fault-chart::before { */ /* .process-fault-chart::before { */
content: ''; content: '';
position: absolute; position: absolute;
top: 65%; bottom: 26px;
left: 8%; left: 10%;
height: calc(32px * var(--beilv)); height: 48px;
/* bottom: calc(20px * var(--beilv));
left: calc(36px * var(--beilv));
height: calc(32px * var(--beilv)); */
width: 90%; width: 90%;
background: linear-gradient(to top, #49fbd789, transparent); background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
z-index: 0;
}
.realtime-production-cost-chart >>> div::before {
/* .fault-category-chart::before { */
content: '';
position: absolute;
bottom: 12%;
left: 6%;
height: 30px;
width: 90%;
border-radius: 3px;
/* border: 1px solid #49fbd7; */
background: linear-gradient(to top, #49fbd789 5%, transparent);
transform: skew(-35deg); transform: skew(-35deg);
z-index: 0; z-index: 0;
} }

2
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -31,7 +31,7 @@ export default {
} }
}, },
grid: { grid: {
top: '15%', top: '18%',
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '2%',