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

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

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

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

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

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

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