update 质量tooltip

This commit is contained in:
lb 2022-11-25 13:53:30 +08:00
parent 7f79481a35
commit 582ac98a52
2 changed files with 120 additions and 23 deletions

View File

@ -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;

View File

@ -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 =