mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 质量管理 techy-analysis-header

Browse Source
This commit is contained in:
lb 2022-11-22 14:26:12 +08:00
parent bf6ecba045
commit 5ded44a5de
3 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/QualityManager/HomePage.vue
View File

@ -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,10 +183,9 @@
</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">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> 产品成品率
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" /> <template v-slot:dateSelect>
</div>
<div class="date-select"> <div class="date-select">
<span <span
:class="{ 'date-select__active': dateMode2 === 'day' }" :class="{ 'date-select__active': dateMode2 === 'day' }"
@ -206,6 +206,11 @@
月 月
</span> </span>
</div> </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>
</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>

17
src/views/QualityManager/components/TechyAnalysisHeader.vue
View File

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

9
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -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: {