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

update 质量管理布局

Browse Source
This commit is contained in:
lb
2022-11-10 14:49:28 +08:00
parent 05e2562da3
commit e71855fee4
4 changed files with 142 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@
<!-- 第一列 -->
<div class="grow-8 flex gap-16">
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>缺陷分类分析</techy-analysis-header>
<new-bar
:xlabel-font-size="8"
@@ -72,7 +72,7 @@
</techy-box>
</div>
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>工序缺陷分析</techy-analysis-header>
<new-bar
chart-name="process-fault"
@@ -93,18 +93,20 @@
<!-- 第二列 -->
<div class="grow-6 flex gap-16">
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产线缺陷分析</techy-analysis-header>
<pl-fault-analysis-pie-chart />
</techy-box>
</div>
<div class="grow">
<techy-box class="" style="padding: 16px;">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产品成品率</techy-analysis-header>
<new-line-stack />
<div class="date-select">
<span>日</span>
<span class="date-select__active">月</span>
<span :class="{ 'date-select__active': dateMode === 'day' }" @click="dateMode = 'day'">日</span>
<span :class="{ 'date-select__active': dateMode === 'month' }" @click="dateMode = 'month'">
月
</span>
</div>
</techy-box>
</div>
@@ -114,7 +116,7 @@
<!-- 第二行 -->
<div class="quality-analysis__body__row-2">
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线A工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@@ -126,7 +128,7 @@
/>
</div>
</techy-box>
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线B工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@@ -138,7 +140,7 @@
/>
</div>
</techy-box>
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线C工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@@ -150,7 +152,7 @@
/>
</div>
</techy-box>
<techy-box style="padding: 16px;" class="flex flex-col">
<techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
<techy-analysis-header>产线D工序质量分析(数量)</techy-analysis-header>
<div class="grow grid gap-16-8 column-2 row-5">
<techy-analysis-bar
@@ -202,6 +204,7 @@ export default {
},
data() {
return {
dateMode: 'month',
qualityTableProps,
qualityDatalist,
qualityExceptionDatalist,
@@ -302,8 +305,7 @@ export default {
}
.gap-16-8 {
/* gap: calc(100vw / 1920 * 16) calc(100vw / 1920 * 8); */
gap: calc(16px * var(--beilv)) calc(8px * var(--beilv));
gap: calc(12px * var(--beilv)) calc(8px * var(--beilv));
}
.column-2 {
@@ -311,7 +313,7 @@ export default {
}
.row-5 {
grid-template-rows: repeat(5, 25px);
grid-template-rows: repeat(5, calc(24px * var(--beilv)));
}
.part-1 {
@@ -339,9 +341,7 @@ export default {
}
.quality-analysis__body__row-1 {
/* flex: 1 1;
max-height: 25vh; */
height: 25vh;
height: calc(216px * var(--beilv));
overflow: hidden;
display: flex;
gap: calc(16px * var(--beilv));
@@ -399,14 +399,14 @@ export default {
}
.gap-16 {
gap: calc(100vw / 1920 * 16);
gap: calc(16px * var(--beilv));
}
.date-select {
position: absolute;
top: calc(100vh / 1920 * 22);
right: calc(100vw / 1440 * 12);
border-radius: 2px;
top: calc(16px * var(--beilv));
right: calc(10px * var(--beilv));
border-radius: calc(2px * var(--beilv));
overflow: hidden;
display: flex;
cursor: pointer;
@@ -414,10 +414,10 @@ export default {
.date-select span {
display: inline-block;
width: 40px;
width: calc(40px * var(--beilv));
text-align: center;
font-size: 12px;
line-height: 18px;
font-size: calc(12px * var(--beilv));
line-height: calc(18px * var(--beilv));
color: white;
background-color: #31878c94;
}