update 质量管理 techy-analysis-header
This commit is contained in:
parent
bf6ecba045
commit
5ded44a5de
@ -138,6 +138,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
<pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pl-select">
|
<div class="pl-select">
|
||||||
<span
|
<span
|
||||||
:class="{ 'pl-select__active': plMode === 'a' }"
|
:class="{ 'pl-select__active': plMode === 'a' }"
|
||||||
@ -182,30 +183,34 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="grow">
|
<div class="grow">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header>产品成品率</techy-analysis-header>
|
<techy-analysis-header class="production-rate">
|
||||||
|
产品成品率
|
||||||
|
<template v-slot:dateSelect>
|
||||||
|
<div class="date-select">
|
||||||
|
<span
|
||||||
|
:class="{ 'date-select__active': dateMode2 === 'day' }"
|
||||||
|
@click="
|
||||||
|
dateMode2 = 'day'
|
||||||
|
dataUpdateToken = '' + Math.random()
|
||||||
|
"
|
||||||
|
>
|
||||||
|
日
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
:class="{ 'date-select__active': dateMode2 === 'month' }"
|
||||||
|
@click="
|
||||||
|
dateMode2 = 'month'
|
||||||
|
dataUpdateToken = '' + Math.random()
|
||||||
|
"
|
||||||
|
>
|
||||||
|
月
|
||||||
|
</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>
|
||||||
<div class="date-select">
|
|
||||||
<span
|
|
||||||
:class="{ 'date-select__active': dateMode2 === 'day' }"
|
|
||||||
@click="
|
|
||||||
dateMode2 = 'day'
|
|
||||||
dataUpdateToken = '' + Math.random()
|
|
||||||
"
|
|
||||||
>
|
|
||||||
日
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
:class="{ 'date-select__active': dateMode2 === 'month' }"
|
|
||||||
@click="
|
|
||||||
dateMode2 = 'month'
|
|
||||||
dataUpdateToken = '' + Math.random()
|
|
||||||
"
|
|
||||||
>
|
|
||||||
月
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</techy-box>
|
</techy-box>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -581,11 +586,15 @@ export default {
|
|||||||
.pl-select,
|
.pl-select,
|
||||||
.date-select {
|
.date-select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(16px * var(--beilv));
|
top: 0;
|
||||||
right: calc(22px * var(--beilv));
|
right: 0;
|
||||||
|
/* top: calc(16px * var(--beilv)); */
|
||||||
|
/* right: calc(22px * var(--beilv)); */
|
||||||
border-radius: calc(2px * var(--beilv));
|
border-radius: calc(2px * var(--beilv));
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -613,4 +622,14 @@ export default {
|
|||||||
.width-222 {
|
.width-222 {
|
||||||
width: calc(375px * var(--beilv));
|
width: calc(375px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 2000px) {
|
||||||
|
.production-rate {
|
||||||
|
/* text-align: left; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .top-icon:last-of-type {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -55,7 +55,7 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="techy-analysis-header__title" style="display: inline-block; transform: skewX(-32deg); ">
|
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); ">
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
<span class="top-icon" style="transform: skewX(-32deg); ">
|
||||||
@ -219,6 +219,8 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<slot name="dateSelect" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -245,6 +247,9 @@ export default {
|
|||||||
.techy-analysis-header {
|
.techy-analysis-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: calc(16px * var(--beilv));
|
margin-bottom: calc(16px * var(--beilv));
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.techy-analysis-header__title {
|
.techy-analysis-header__title {
|
||||||
@ -260,11 +265,19 @@ export default {
|
|||||||
margin-bottom: calc(2px * var(--beilv));
|
margin-bottom: calc(2px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.legend-right {
|
||||||
|
display: flex;
|
||||||
|
gap: calc(8px * var(--beilv));
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.legend-item {
|
.legend-item {
|
||||||
font-size: calc(10px * var(--beilv));
|
font-size: calc(10px * var(--beilv));
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #dff1fe;
|
color: #dff1fe;
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-item::before {
|
.legend-item::before {
|
||||||
|
@ -36,7 +36,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '25%',
|
top: 56,
|
||||||
left: '2%',
|
left: '2%',
|
||||||
right: '5%',
|
right: '5%',
|
||||||
bottom: '5%',
|
bottom: '5%',
|
||||||
@ -66,14 +66,15 @@ export default {
|
|||||||
|
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
name: '成品率',
|
name: '成品率 ',
|
||||||
type: 'value',
|
type: 'value',
|
||||||
min: 'dataMin',
|
min: 'dataMin',
|
||||||
splitNumber: 4,
|
splitNumber: 4,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(255,255,255,0.7)',
|
color: 'rgba(255,255,255,0.7)',
|
||||||
fontSize: 12,
|
fontSize: 10,
|
||||||
align: 'right'
|
align: 'left',
|
||||||
|
verticalAlign: 'bottom'
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
Loading…
Reference in New Issue
Block a user