@@ -137,7 +137,7 @@ | |||
:class="{ 'pl-select__active': plMode === 'a' }" | |||
@click=" | |||
plMode = 'a' | |||
chosenDatalist = getFaultDataList() | |||
chosenDatalist = getFaultDataList() | |||
" | |||
> | |||
A | |||
@@ -187,8 +187,8 @@ | |||
</techy-box> | |||
</div> | |||
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;"> | |||
<techy-box class="" style="padding: 0 calc(16px * var(--beilv));"> | |||
<productionRateHeader | |||
<techy-box class="" style="padding: calc(16px * var(--beilv));"> | |||
<!-- <productionRateHeader | |||
@update-data=" | |||
obj => { | |||
dataUpdateToken = obj.str | |||
@@ -197,7 +197,42 @@ | |||
" | |||
> | |||
产品成品率 | |||
</productionRateHeader> | |||
</productionRateHeader> --> | |||
<techy-analysis-header :show-top-icon="false"> | |||
产线成品率 | |||
<template v-slot:dateSelect> | |||
<div class="pl-select"> | |||
<span | |||
:class="{ 'pl-select__active': dateMode2 === 'day' }" | |||
@click=" | |||
dateMode2 = 'day' | |||
dataUpdateToken = Math.random()+'' | |||
" | |||
> | |||
日 | |||
</span> | |||
<span | |||
:class="{ 'pl-select__active': dateMode2 === 'month' }" | |||
@click=" | |||
dateMode2 = 'month' | |||
dataUpdateToken = Math.random()+'' | |||
" | |||
> | |||
月 | |||
</span> | |||
</div> | |||
<div class="date-select fake-legend"> | |||
<span> | |||
<!-- 产线A --> | |||
</span> | |||
<span> | |||
<!-- 产线B --> | |||
</span> | |||
</div> | |||
</template> | |||
</techy-analysis-header> | |||
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> | |||
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" /> | |||
</div> | |||
@@ -300,7 +335,8 @@ export default { | |||
}, | |||
data() { | |||
const quexianDatalist = [ | |||
[ // 月a | |||
[ | |||
// 月a | |||
{ value: 5.21, name: '破片' }, | |||
{ value: 3.2, name: '崩边' }, | |||
{ value: 4.12, name: '脏污' }, | |||
@@ -308,7 +344,8 @@ export default { | |||
{ value: 0.96, name: '崩孔' }, | |||
{ value: 2.2, name: '其他' } | |||
], | |||
[ // 月b | |||
[ | |||
// 月b | |||
{ value: 4.34, name: '破片' }, | |||
{ value: 3.4, name: '崩边' }, | |||
{ value: 4.1, name: '脏污' }, | |||
@@ -316,7 +353,8 @@ export default { | |||
{ value: 0.32, name: '崩孔' }, | |||
{ value: 2.14, name: '其他' } | |||
], | |||
[ // 日a | |||
[ | |||
// 日a | |||
{ value: 184, name: '破片' }, | |||
{ value: 110, name: '崩边' }, | |||
{ value: 163, name: '脏污' }, | |||
@@ -324,7 +362,8 @@ export default { | |||
{ value: 22, name: '崩孔' }, | |||
{ value: 74, name: '其他' } | |||
], | |||
[ // 日b | |||
[ | |||
// 日b | |||
{ value: 172, name: '破片' }, | |||
{ value: 122, name: '崩边' }, | |||
{ value: 162, name: '脏污' }, | |||
@@ -338,7 +377,7 @@ export default { | |||
dataUpdateToken: 'xx-token', | |||
plMode: 'a', | |||
dateMode: 'month', | |||
dateMode2: 'month', | |||
dateMode2: 'day', | |||
qualityTableProps, | |||
qualityDatalist, | |||
qualityExceptionDatalist, | |||
@@ -629,6 +668,15 @@ export default { | |||
width: calc(375px * var(--beilv)); | |||
} | |||
.fake-legend{ | |||
cursor: unset; | |||
} | |||
.fake-legend span { | |||
background: none; | |||
cursor: none; | |||
color: #DFF1FE; | |||
} | |||
/* @media all and (max-width: 1680px) { | |||
.production-rate { | |||
text-align: center; | |||
@@ -11,19 +11,19 @@ class ChartOption { | |||
constructor() { | |||
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'] | |||
// this.legend = { | |||
// top: 11, | |||
// right: 32, | |||
// itemWidth: 8, | |||
// itemHeight: 8, | |||
// textStyle: { | |||
// color: '#fff9', | |||
// fontSize: 10 | |||
// } | |||
// } | |||
this.legend = { | |||
top: 14, | |||
right: 22, | |||
itemWidth: 6, | |||
itemHeight: 8, | |||
textStyle: { | |||
color: '#DFF1FECC', | |||
fontSize: 12 | |||
} | |||
} | |||
this.grid = { | |||
top: 64, | |||
top: 72, | |||
left: 12, | |||
right: 28, | |||
bottom: 20, | |||
@@ -44,6 +44,7 @@ class ChartOption { | |||
} | |||
} | |||
let today = new Date() | |||
this.xAxis = { | |||
type: 'category', | |||
boundaryGap: false, | |||
@@ -62,13 +63,15 @@ class ChartOption { | |||
}, | |||
data: | |||
this.mode === 'month' | |||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] | |||
? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()) | |||
.fill(1) | |||
.map((_, idx) => idx + 1) | |||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | |||
} | |||
this.yAxis = [ | |||
{ | |||
name: '成品率 ', | |||
name: '成品率 ', | |||
type: 'value', | |||
min: '80', | |||
splitNumber: 4, | |||
@@ -259,11 +262,57 @@ export default { | |||
methods: { | |||
refreshData() { | |||
// update xaxis | |||
let today = new Date() | |||
this.configs.xAxis.data = | |||
this.mode === 'month' | |||
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] | |||
? Array(new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate()) | |||
.fill(1) | |||
.map((_, idx) => idx + 1) | |||
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | |||
// update tooltip | |||
if (this.mode === 'month') { | |||
this.configs.tooltip = { | |||
trigger: 'axis', | |||
padding: 10, | |||
backgroundColor: 'rgba(13, 29, 53, 0.8)', | |||
extraCssText: 'width: 180px !important; ', | |||
axisPointer: { | |||
type: 'line', | |||
lineStyle: { | |||
type: 'dotted', | |||
color: '#7BFFFB' | |||
} | |||
}, | |||
formatter: params => { | |||
const currentMonth = new Date().getMonth() + 1 | |||
return ` | |||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));"> | |||
<h2 style="margin: 0; font-size: calc(14px * var(--beilv)); ">${currentMonth}-${params[0].axisValue}</h2> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[0]}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span> | |||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[1]}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span> | |||
</div> | |||
` | |||
} | |||
} | |||
} else if (this.mode === 'day') { | |||
this.configs.tooltip = null | |||
this.configs.tooltip = { | |||
trigger: 'axis', | |||
padding: 10, | |||
backgroundColor: 'rgba(13, 29, 53, 0.8)', | |||
extraCssText: 'width: 180px !important; ', | |||
axisPointer: { | |||
type: 'line', | |||
lineStyle: { | |||
type: 'dotted', | |||
color: '#7BFFFB' | |||
} | |||
}, | |||
formatter: undefined | |||
} | |||
} | |||
// update series | |||
this.configs.series.forEach(item => { | |||
item.data = | |||