mt-fe-group/11-mes-new
12
0
Форкнуть 0
Код Задачи Запросы на слияние Релизы Вики Активность

update 质量管理布局

Просмотр исходного кода
Этот коммит содержится в:
lb 2022-11-10 14:49:28 +08:00
родитель 05e2562da3
Коммит e71855fee4
4 изменённых файлов: 142 добавлений и 140 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

46
src/views/QualityManager/HomePage.vue
Просмотреть файл

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

24
src/views/QualityManager/components/TechyAnalysisBar.vue
Просмотреть файл

@ -57,7 +57,7 @@ export default {
.quality-analysis-bar {
border-radius: 2px;
padding: 2px;
padding: calc(2px * var(--beilv));
display: flex;
}
@ -77,23 +77,23 @@ export default {
.placeholder-block-wrapper {
flex-grow: 1;
overflow: hidden;
min-width: 32px;
min-width: calc(32px * var(--beilv));
position: relative;
display: flex;
justify-content: center;
}
.placeholder-block-wrapper > div {
width: 300px;
width: calc(300px * var(--beilv));
position: absolute;
top: 0;
right: 0;
}
.placeholder-block {
width: 20px;
height: 20px;
margin-left: 3px;
width: calc(20px * var(--beilv));
height: calc(20px * var(--beilv));
margin-left: calc(3px * var(--beilv));
}
.block-green-5 {
@ -178,9 +178,9 @@ export default {
overflow: hidden;
color: white;
display: inline-block;
padding: 3px 8px;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
font-size: calc(14px * var(--beilv));
line-height: calc(12px * var(--beilv));
}
.quality-analysis-bar__amount {
@ -189,8 +189,8 @@ export default {
/* min-width: 35%; */
width: 35%;
text-align: left;
padding: 3px 0;
font-size: 14px;
line-height: 12px;
padding: calc(3px * var(--beilv)) 0;
font-size: calc(14px * var(--beilv));;
line-height: calc(12px * var(--beilv));;
}
</style>

210
src/views/QualityManager/components/TechyAnalysisHeader.vue
Просмотреть файл

@ -1,116 +1,112 @@
<template>
<div class="techy-analysis-header">
<span v-html="titleLeftSVG" />
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="techy-analysis-header__title">
<slot />
</span>
<span v-html="titleRightSVG" />
<span class="top-icon">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
</template>
<script>
const titleLeftSVG = `<svg
width="56px"
height="13px"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon
id="路径-11"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`
const titleRightSVG = `<svg
width="56px"
height="13px"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon
id="路径-11"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g></svg>`
export default {
name: 'TechyAnalysisHeader',
data() {
return { titleLeftSVG, titleRightSVG }
return {}
}
}
</script>
@ -118,12 +114,18 @@ export default {
<style scoped>
.techy-analysis-header {
text-align: center;
margin-bottom: 16px;
margin-bottom: calc(16px * var(--beilv));
}
.techy-analysis-header__title {
color: #01cfcc;
font-size: 15px;
line-height: 18px;
font-size: calc(15px * var(--beilv));
line-height: calc(18px * var(--beilv));
}
.top-icon {
display: inline-block;
width: calc(56px * var(--beilv));
height: calc(13px * var(--beilv));
}
</style>

2
src/views/QualityManager/components/TechyBox.vue
Просмотреть файл

@ -11,7 +11,7 @@ export default {}
<style scoped>
.techy-box {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.2);
display: inline-block;
height: 100%;
width: 100%;