update 质量tooltip
This commit is contained in:
parent
7f79481a35
commit
582ac98a52
@ -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 =
|
||||
|
||||
Loading…
Reference in New Issue
Block a user