|
|
@@ -1,104 +1,221 @@ |
|
|
|
<template> |
|
|
|
<div class="techy-analysis-header"> |
|
|
|
<span v-if="showTopIcon" 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" |
|
|
|
<template v-if="type === 'special'"> |
|
|
|
<div |
|
|
|
style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;" |
|
|
|
> |
|
|
|
<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="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div> |
|
|
|
|
|
|
|
<div style="flex: 1; white-space: nowrap; overflow: hidden;"> |
|
|
|
<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 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 class="legend" style="background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"> |
|
|
|
<div class="legend-item pla" style="margin-right: calc(8px * var(--beilv));">产线A</div> |
|
|
|
<div class="legend-item plb">产线B</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template v-else> |
|
|
|
<span v-if="showTopIcon" 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> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
<span class="techy-analysis-header__title"> |
|
|
|
<slot /> |
|
|
|
</span> |
|
|
|
<span v-if="showTopIcon" 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> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
<span class="techy-analysis-header__title"> |
|
|
|
<slot /> |
|
|
|
</span> |
|
|
|
<span v-if="showTopIcon" 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> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
</svg> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
@@ -106,6 +223,10 @@ |
|
|
|
export default { |
|
|
|
name: 'TechyAnalysisHeader', |
|
|
|
props: { |
|
|
|
type: { |
|
|
|
type: String, |
|
|
|
default: 'dafault-type' |
|
|
|
}, |
|
|
|
showTopIcon: { |
|
|
|
type: Boolean, |
|
|
|
default: true |
|
|
@@ -132,6 +253,30 @@ export default { |
|
|
|
.top-icon { |
|
|
|
display: inline-block; |
|
|
|
width: calc(56px * var(--beilv)); |
|
|
|
height: calc(13px * var(--beilv)); |
|
|
|
height: calc(12px * var(--beilv)); |
|
|
|
margin-bottom: calc(2px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.legend-item { |
|
|
|
font-size: calc(10px * var(--beilv)); |
|
|
|
line-height: 1.5; |
|
|
|
color: #dff1fe; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
|
|
|
|
.legend-item::before { |
|
|
|
content: ''; |
|
|
|
display: inline-block; |
|
|
|
width: calc(8px * var(--beilv)); |
|
|
|
height: calc(8px * var(--beilv)); |
|
|
|
background: #fffc; |
|
|
|
margin-right: calc(8px * var(--beilv)); |
|
|
|
} |
|
|
|
|
|
|
|
.pla::before { |
|
|
|
background: linear-gradient(to top, #49fbd6, transparent); |
|
|
|
} |
|
|
|
.plb::before { |
|
|
|
background: linear-gradient(to top, #49b2ff, transparent); |
|
|
|
} |
|
|
|
</style> |