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