update 质量tooltip
This commit is contained in:
parent
7f79481a35
commit
582ac98a52
@ -137,7 +137,7 @@
|
|||||||
:class="{ 'pl-select__active': plMode === 'a' }"
|
:class="{ 'pl-select__active': plMode === 'a' }"
|
||||||
@click="
|
@click="
|
||||||
plMode = 'a'
|
plMode = 'a'
|
||||||
chosenDatalist = getFaultDataList()
|
chosenDatalist = getFaultDataList()
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
A
|
A
|
||||||
@ -187,8 +187,8 @@
|
|||||||
</techy-box>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
|
<div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
|
||||||
<techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<productionRateHeader
|
<!-- <productionRateHeader
|
||||||
@update-data="
|
@update-data="
|
||||||
obj => {
|
obj => {
|
||||||
dataUpdateToken = obj.str
|
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%;">
|
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
|
||||||
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
|
||||||
</div>
|
</div>
|
||||||
@ -300,7 +335,8 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const quexianDatalist = [
|
const quexianDatalist = [
|
||||||
[ // 月a
|
[
|
||||||
|
// 月a
|
||||||
{ value: 5.21, name: '破片' },
|
{ value: 5.21, name: '破片' },
|
||||||
{ value: 3.2, name: '崩边' },
|
{ value: 3.2, name: '崩边' },
|
||||||
{ value: 4.12, name: '脏污' },
|
{ value: 4.12, name: '脏污' },
|
||||||
@ -308,7 +344,8 @@ export default {
|
|||||||
{ value: 0.96, name: '崩孔' },
|
{ value: 0.96, name: '崩孔' },
|
||||||
{ value: 2.2, name: '其他' }
|
{ value: 2.2, name: '其他' }
|
||||||
],
|
],
|
||||||
[ // 月b
|
[
|
||||||
|
// 月b
|
||||||
{ value: 4.34, name: '破片' },
|
{ value: 4.34, name: '破片' },
|
||||||
{ value: 3.4, name: '崩边' },
|
{ value: 3.4, name: '崩边' },
|
||||||
{ value: 4.1, name: '脏污' },
|
{ value: 4.1, name: '脏污' },
|
||||||
@ -316,7 +353,8 @@ export default {
|
|||||||
{ value: 0.32, name: '崩孔' },
|
{ value: 0.32, name: '崩孔' },
|
||||||
{ value: 2.14, name: '其他' }
|
{ value: 2.14, name: '其他' }
|
||||||
],
|
],
|
||||||
[ // 日a
|
[
|
||||||
|
// 日a
|
||||||
{ value: 184, name: '破片' },
|
{ value: 184, name: '破片' },
|
||||||
{ value: 110, name: '崩边' },
|
{ value: 110, name: '崩边' },
|
||||||
{ value: 163, name: '脏污' },
|
{ value: 163, name: '脏污' },
|
||||||
@ -324,7 +362,8 @@ export default {
|
|||||||
{ value: 22, name: '崩孔' },
|
{ value: 22, name: '崩孔' },
|
||||||
{ value: 74, name: '其他' }
|
{ value: 74, name: '其他' }
|
||||||
],
|
],
|
||||||
[ // 日b
|
[
|
||||||
|
// 日b
|
||||||
{ value: 172, name: '破片' },
|
{ value: 172, name: '破片' },
|
||||||
{ value: 122, name: '崩边' },
|
{ value: 122, name: '崩边' },
|
||||||
{ value: 162, name: '脏污' },
|
{ value: 162, name: '脏污' },
|
||||||
@ -338,7 +377,7 @@ export default {
|
|||||||
dataUpdateToken: 'xx-token',
|
dataUpdateToken: 'xx-token',
|
||||||
plMode: 'a',
|
plMode: 'a',
|
||||||
dateMode: 'month',
|
dateMode: 'month',
|
||||||
dateMode2: 'month',
|
dateMode2: 'day',
|
||||||
qualityTableProps,
|
qualityTableProps,
|
||||||
qualityDatalist,
|
qualityDatalist,
|
||||||
qualityExceptionDatalist,
|
qualityExceptionDatalist,
|
||||||
@ -629,6 +668,15 @@ export default {
|
|||||||
width: calc(375px * var(--beilv));
|
width: calc(375px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fake-legend{
|
||||||
|
cursor: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fake-legend span {
|
||||||
|
background: none;
|
||||||
|
cursor: none;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
/* @media all and (max-width: 1680px) {
|
/* @media all and (max-width: 1680px) {
|
||||||
.production-rate {
|
.production-rate {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -11,19 +11,19 @@ class ChartOption {
|
|||||||
constructor() {
|
constructor() {
|
||||||
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
|
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
|
||||||
|
|
||||||
// this.legend = {
|
this.legend = {
|
||||||
// top: 11,
|
top: 14,
|
||||||
// right: 32,
|
right: 22,
|
||||||
// itemWidth: 8,
|
itemWidth: 6,
|
||||||
// itemHeight: 8,
|
itemHeight: 8,
|
||||||
// textStyle: {
|
textStyle: {
|
||||||
// color: '#fff9',
|
color: '#DFF1FECC',
|
||||||
// fontSize: 10
|
fontSize: 12
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
this.grid = {
|
this.grid = {
|
||||||
top: 64,
|
top: 72,
|
||||||
left: 12,
|
left: 12,
|
||||||
right: 28,
|
right: 28,
|
||||||
bottom: 20,
|
bottom: 20,
|
||||||
@ -44,6 +44,7 @@ class ChartOption {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let today = new Date()
|
||||||
this.xAxis = {
|
this.xAxis = {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
@ -62,13 +63,15 @@ class ChartOption {
|
|||||||
},
|
},
|
||||||
data:
|
data:
|
||||||
this.mode === 'month'
|
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 = [
|
this.yAxis = [
|
||||||
{
|
{
|
||||||
name: '成品率 ',
|
name: '成品率 ',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: '80',
|
min: '80',
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
@ -259,11 +262,57 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
refreshData() {
|
refreshData() {
|
||||||
// update xaxis
|
// update xaxis
|
||||||
|
let today = new Date()
|
||||||
this.configs.xAxis.data =
|
this.configs.xAxis.data =
|
||||||
this.mode === 'month'
|
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
|
// update series
|
||||||
this.configs.series.forEach(item => {
|
this.configs.series.forEach(item => {
|
||||||
item.data =
|
item.data =
|
||||||
|
Loading…
Reference in New Issue
Block a user