mt-fe-group/11-mes-new
12
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Wydania Wiki Aktywność

update 质量tooltip

Przeglądaj źródła
This commit is contained in:
lb 2022-11-25 13:53:30 +08:00
rodzic 7f79481a35
commit 582ac98a52
2 zmienionych plików z 120 dodań i 23 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

66
src/views/QualityManager/HomePage.vue
Wyświetl plik

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

77
src/views/QualityManager/components/charts/newLineStack.vue
Wyświetl plik

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