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

24
src/views/QualityManager/components/TechyAnalysisBar.vue
View File

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

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

@ -1,116 +1,112 @@
<template> <template>
<div class="techy-analysis-header"> <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"> <span class="techy-analysis-header__title">
<slot /> <slot />
</span> </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> </div>
</template> </template>
<script> <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 { export default {
name: 'TechyAnalysisHeader', name: 'TechyAnalysisHeader',
data() { data() {
return { titleLeftSVG, titleRightSVG } return {}
} }
} }
</script> </script>
@ -118,12 +114,18 @@ export default {
<style scoped> <style scoped>
.techy-analysis-header { .techy-analysis-header {
text-align: center; text-align: center;
margin-bottom: 16px; margin-bottom: calc(16px * var(--beilv));
} }
.techy-analysis-header__title { .techy-analysis-header__title {
color: #01cfcc; color: #01cfcc;
font-size: 15px; font-size: calc(15px * var(--beilv));
line-height: 18px; line-height: calc(18px * var(--beilv));
}
.top-icon {
display: inline-block;
width: calc(56px * var(--beilv));
height: calc(13px * var(--beilv));
} }
</style> </style>

2
src/views/QualityManager/components/TechyBox.vue
View File

@ -11,7 +11,7 @@ export default {}
<style scoped> <style scoped>
.techy-box { .techy-box {
background: transparent; 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; display: inline-block;
height: 100%; height: 100%;
width: 100%; width: 100%;