|
|
@@ -1,122 +1,125 @@ |
|
|
|
<template> |
|
|
|
<div class="techy-analysis-header"> |
|
|
|
<template v-if="type === 'special'"> |
|
|
|
<div |
|
|
|
style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;" |
|
|
|
> |
|
|
|
<div class="legend" style="background: #fff0; width: calc(84px * var(--beilv));"></div> |
|
|
|
|
|
|
|
<div style="flex: 1; white-space: nowrap; overflow: hidden;"> |
|
|
|
<span class="top-icon" style="transform: translateY(1px) skewX(-32deg); "> |
|
|
|
<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> |
|
|
|
<div class="special-wrapper"> |
|
|
|
<div class="special-wrapper__left"></div> |
|
|
|
<div class="special-wrapper__middle"> |
|
|
|
<div class="special-wrapper__middle--inner"> |
|
|
|
<div style="transform: translateX(12%)"> |
|
|
|
<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> |
|
|
|
</g> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
class="techy-analysis-header__title" |
|
|
|
style="display: inline-block; transform: translateX(-1px) skewX(-32deg); " |
|
|
|
> |
|
|
|
<slot /> |
|
|
|
</span> |
|
|
|
<span class="top-icon" style="transform: translateY(1px) skewX(-32deg); "> |
|
|
|
<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> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
<span class="techy-analysis-header__title"> |
|
|
|
<slot /> |
|
|
|
</span> |
|
|
|
<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> |
|
|
|
</g> |
|
|
|
</g> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
class="legend legend-right" |
|
|
|
style="transform: skewX(-32deg); background: #fff0; width: calc(100px * var(--beilv)); padding-left: calc(6px * var(--beilv));" |
|
|
|
> |
|
|
|
<div class="legend-item pla" style=" margin-right: calc(2px * var(--beilv));">产线A</div> |
|
|
|
<div class="legend-item plb" style=" ">产线B</div> |
|
|
|
<div class="special-wrapper__right"> |
|
|
|
<div class="special-wrapper__right--inner"> |
|
|
|
<div class="pla" style="margin-right: calc(2px * var(--beilv));">产线A</div> |
|
|
|
<div class="plb">产线B</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
@@ -292,10 +295,64 @@ export default { |
|
|
|
margin-right: calc(4px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.pla::before { |
|
|
|
background: linear-gradient(to top, #49fbd6, transparent); |
|
|
|
.special-wrapper { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
transform: skewX(35deg); |
|
|
|
background: #fff0; |
|
|
|
width: 100%; |
|
|
|
height: calc(22px * var(--beilv)); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.special-wrapper__left { |
|
|
|
width: 1px; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.special-wrapper__middle { |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.special-wrapper__middle--inner { |
|
|
|
transform: skewX(-35deg); |
|
|
|
white-space: nowrap; |
|
|
|
display: flex; |
|
|
|
height: 100%; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.special-wrapper__right { |
|
|
|
padding-left: calc(8px * var(--beilv)); |
|
|
|
padding-right: calc(8px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.special-wrapper__right--inner { |
|
|
|
transform: skewX(-35deg); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: calc(4px * var(--beilv)); |
|
|
|
height: 100%; |
|
|
|
width: calc(100px * var(--beilv)); |
|
|
|
padding-left: calc(6px * var(--beilv)); |
|
|
|
font-size: calc(12px * var(--beilv)); |
|
|
|
color: #fff9; |
|
|
|
} |
|
|
|
|
|
|
|
.special-wrapper__right--inner > div::before { |
|
|
|
content: ''; |
|
|
|
display: inline-block; |
|
|
|
margin-right: calc(2px * var(--beilv)); |
|
|
|
width: calc(8px * var(--beilv)); |
|
|
|
height: calc(8px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.plb::before { |
|
|
|
background: linear-gradient(to top, #49fbd6, transparent); |
|
|
|
} |
|
|
|
.pla::before { |
|
|
|
background: linear-gradient(to top, #49b2ff, transparent); |
|
|
|
} |
|
|
|
</style> |