mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: mt-fe-group:f09c048cf05d8f00b18c338092c1243a6f6ac1e3
Branches Tags
mt-fe-group:master
mt-fe-group:lb
mt-fe-group:zjl
mt-fe-group:gtz
..
compare: mt-fe-group:9dd1f274817c1ffac33dfee1a550eb2760b6f675
Branches Tags
mt-fe-group:lb
mt-fe-group:master
mt-fe-group:zjl
mt-fe-group:gtz

3 Commits
f09c048cf0 ... 9dd1f27481

Author SHA1 Message Date
lb
9dd1f27481 update 质量缺陷分析的标题+legend 2022-11-18 17:02:11 +08:00
lb
5e78b4b5da update 2022-11-18 15:03:18 +08:00
lb
9b8f796100 update 2022-11-18 14:50:57 +08:00
11 changed files with 381 additions and 190 deletions
Show Stats Expand all files Collapse all files

4
src/views/3DOverview/components/TechyTable.vue
View File

@ -200,11 +200,11 @@ export default {
} }
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) { .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e90; background-color: #0e203ecc;
} }
.visual-base-table-container >>> .el-table tbody tr:nth-child(even), .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead { .visual-base-table-container >>> .el-table thead {
background-color: #20376090; background-color: #213961cc;
} }
</style> </style>

22
src/views/EquipmentManager/components/TechyAnalysisHeader.vue
View File

@ -1,10 +1,22 @@
<template> <template>
<div class="techy-analysis-header"> <div class="techy-analysis-header">
<span style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));" v-html="titleLeftSVG" /> <template v-if="type === 'special'">
<div style="background: #cccc; width: 200px; height: 20px;"></div>
</template>
<template v-else>
<span
style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));"
v-html="titleLeftSVG"
/>
<span class="techy-analysis-header__title"> <span class="techy-analysis-header__title">
<slot /> <slot />
</span> </span>
<span style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));" v-html="titleRightSVG" /> <span
style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));"
v-html="titleRightSVG"
/>
</template>
</div> </div>
</template> </template>
@ -109,6 +121,12 @@ const titleRightSVG = `<svg
export default { export default {
name: 'TechyAnalysisHeader', name: 'TechyAnalysisHeader',
props: {
type: {
type: String,
default: 'default-type'
}
},
data() { data() {
return { titleLeftSVG, titleRightSVG } return { titleLeftSVG, titleRightSVG }
} }

11
src/views/EquipmentManager/components/TechyTable.vue
View File

@ -126,14 +126,14 @@ export default {
} }
.visual-base-table-container >>> ::-webkit-scrollbar-button { .visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));; width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));; height: calc(8px * var(--beilv));
background: #5bc4bf9f; background: #5bc4bf9f;
position: relative; position: relative;
} }
.visual-base-table-container >>> ::-webkit-scrollbar-thumb { .visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));; border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f; background: #5bc4bf9f;
} }
@ -200,12 +200,11 @@ export default {
} }
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) { .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e; background-color: #0e203ecc;
/* background-color: #0e203e; */
} }
.visual-base-table-container >>> .el-table tbody tr:nth-child(even), .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead { .visual-base-table-container >>> .el-table thead {
background-color: #203760; background-color: #213961cc;
} }
</style> </style>

22
src/views/EquipmentManager/mockData.js
View File

@ -33,12 +33,12 @@ const PriorityComponent = {
} }
export const equipmentExceptionProps = [ export const equipmentExceptionProps = [
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 60 }, { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 60 }, { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
{ label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 }, { label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
{ label: '报修/发现人', prop: 'creator', align: 'center', width: 110 }, { label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 }, { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 } { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
] ]
export const equipmentExceptionDatalist = [ export const equipmentExceptionDatalist = [
@ -51,9 +51,9 @@ export const equipmentExceptionDatalist = [
{ "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-20 03:36:47", "priority": 2 }, { "eqName": "打孔", "pl": "B", "content": "际从定接花她变人周而导总流西更观史。", "creator": "赵静", "time": "2021-01-20 03:36:47", "priority": 2 },
{ "eqName": "下片", "pl": "A", "content": "厂积各克性型世型我地得圆与时速。", "creator": "姜洋", "time": "2021-11-30 07:56:26", "priority": 3 }, { "eqName": "下片", "pl": "A", "content": "厂积各克性型世型我地得圆与时速。", "creator": "姜洋", "time": "2021-11-30 07:56:26", "priority": 3 },
{ "eqName": "钢化", "pl": "A", "content": "证法作无群只放科可少头生广水。", "creator": "赖艳", "time": "2022-10-10 12:01:14", "priority": 1 }, { "eqName": "钢化", "pl": "A", "content": "证法作无群只放科可少头生广水。", "creator": "赖艳", "time": "2022-10-10 12:01:14", "priority": 1 },
{ "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 4 }, { "eqName": "磨边", "pl": "A", "content": "极满具究极力入矿电适花军系象。", "creator": "熊静", "time": "2021-01-27 03:24:33", "priority": 1 },
{ "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 }, { "eqName": "二镀", "pl": "B", "content": "科传军正战没题许青生面发用矿科。", "creator": "龚明", "time": "2022-02-28 16:26:11", "priority": 2 },
{ "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 4 }, { "eqName": "磨边", "pl": "A", "content": "入以品切中算极同三那性当。", "creator": "万娟", "time": "2022-08-23 08:44:41", "priority": 2 },
{ "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 21:15:10", "priority": 2 }, { "eqName": "固化", "pl": "B", "content": "火音红建活先以它法对所重间量马斗将。", "creator": "徐丽", "time": "2021-07-30 21:15:10", "priority": 2 },
{ "eqName": "一镀", "pl": "A", "content": "位构命利整线两计统被约张以导理。", "creator": "叶娜", "time": "2022-05-05 22:45:13", "priority": 1 }, { "eqName": "一镀", "pl": "A", "content": "位构命利整线两计统被约张以导理。", "creator": "叶娜", "time": "2022-05-05 22:45:13", "priority": 1 },
{ "eqName": "冷却", "pl": "A", "content": "东改近装商了整标革并该青外育放般体。", "creator": "田磊", "time": "2021-12-01 07:24:59", "priority": 2 }, { "eqName": "冷却", "pl": "A", "content": "东改近装商了整标革并该青外育放般体。", "creator": "田磊", "time": "2021-12-01 07:24:59", "priority": 2 },
@ -116,13 +116,13 @@ export const equipmentAlarmDatalist = [
{ {
"pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3 "pl": "A", "eqName": "打孔后清洗机", "eqCode": "A3CAP20200727075125", "content": "员因江单话况质己家小展矿指到之组她。", "priority": 3
}, },
{ "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 4 }, { "pl": "A", "eqName": "磨边", "eqCode": "A7ED20200512213432", "content": "观长因带至成为也越效飞约况面的。", "priority": 3 },
{ {
"pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2 "pl": "A", "eqName": "固化", "eqCode": "A4CO20220608145053", "content": "回状边及族值强第手听存派治严农象江。", "priority": 2
}, },
{ "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 }, { "pl": "B", "eqName": "冷却", "eqCode": "B4CL20200526045602", "content": "采料这百他打体拉素但即面之。", "priority": 1 },
{ {
"pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 4 "pl": "B", "eqName": "打孔", "eqCode": "B6LP20220326162041", "content": "列保己问向九青保自济习后长而类月段斗。", "priority": 2
}, },
{ "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 }, { "pl": "A", "eqName": "磨边", "eqCode": "A4ED20200325081934", "content": "产矿身断通者和意层价前就知头。", "priority": 2 },
{ {
@ -133,9 +133,9 @@ export const equipmentAlarmDatalist = [
{ "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 }, { "pl": "B", "eqName": "预热", "eqCode": "B1PR20200323134700", "content": "消选们度周料革理观构平活组事件。", "priority": 3 },
{ "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 }, { "pl": "A", "eqName": "打孔", "eqCode": "A1LP20200513020427", "content": "华家是可路议自商取半也五。", "priority": 1 },
{ "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 }, { "pl": "A", "eqName": "钢化", "eqCode": "A7TF20210928172616", "content": "点量都酸较此结同去写群论被千。", "priority": 2 },
{ "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 4 }, { "pl": "A", "eqName": "二镀", "eqCode": "A5SC20210104132647", "content": "切提个水铁外步油好连身相争外群儿此。", "priority": 1 },
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 4 }, { "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A4CAE20210225140150", "content": "学七直以半去江内后上知往值质值。", "priority": 1 },
{ "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 4 }, { "pl": "B", "eqName": "打孔后清洗机", "eqCode": "B6CAP20200831083210", "content": "活小着许今取图国步成流海分就适转院容。", "priority": 2 },
] ]
/** 设备分析 */ /** 设备分析 */

20
src/views/QualityManager/HomePage.vue
View File

@ -38,10 +38,10 @@
<!-- 第一行 --> <!-- 第一行 -->
<div class="quality-analysis__body__row-1"> <div class="quality-analysis__body__row-1">
<!-- 第一列 --> <!-- 第一列 -->
<div class="grow-8 flex gap-16"> <div class="flex gap-16">
<div class="grow"> <div class="grow" style="max-width: 24vw;">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(8px * var(--beilv));">
<techy-analysis-header>产线缺陷日对比</techy-analysis-header> <techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
<div <div
class="absolute top-0 left-0" class="absolute top-0 left-0"
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
@ -67,9 +67,9 @@
</div> </div>
</techy-box> </techy-box>
</div> </div>
<div class="grow"> <div class="grow" style="max-width: 24vw;">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(8px * var(--beilv));">
<techy-analysis-header>产线缺陷月对比</techy-analysis-header> <techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
<div <div
class="absolute top-0 left-0" class="absolute top-0 left-0"
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
@ -99,7 +99,7 @@
</div> </div>
<!-- 第二列 --> <!-- 第二列 -->
<div class="grow-6 flex gap-16"> <div class="grow flex gap-16">
<div class="width-222"> <div class="width-222">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header> <techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
@ -156,7 +156,9 @@
<div class="grow"> <div class="grow">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header>产品成品率</techy-analysis-header> <techy-analysis-header>产品成品率</techy-analysis-header>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<new-line-stack :data-update-token="dataUpdateToken" /> <new-line-stack :data-update-token="dataUpdateToken" />
</div>
<div class="date-select"> <div class="date-select">
<span <span
:class="{ 'date-select__active': dateMode2 === 'day' }" :class="{ 'date-select__active': dateMode2 === 'day' }"
@ -552,7 +554,7 @@ export default {
.date-select { .date-select {
position: absolute; position: absolute;
top: calc(16px * var(--beilv)); top: calc(16px * var(--beilv));
right: calc(10px * var(--beilv)); right: calc(22px * var(--beilv));
border-radius: calc(2px * var(--beilv)); border-radius: calc(2px * var(--beilv));
overflow: hidden; overflow: hidden;
display: flex; display: flex;

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

@ -1,5 +1,121 @@
<template> <template>
<div class="techy-analysis-header"> <div class="techy-analysis-header">
<template v-if="type === 'special'">
<div
style="background: #ccc0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
>
<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"> <span v-if="showTopIcon" class="top-icon">
<svg <svg
width="100%" width="100%"
@ -99,6 +215,7 @@
</g> </g>
</svg> </svg>
</span> </span>
</template>
</div> </div>
</template> </template>
@ -106,6 +223,10 @@
export default { export default {
name: 'TechyAnalysisHeader', name: 'TechyAnalysisHeader',
props: { props: {
type: {
type: String,
default: 'dafault-type'
},
showTopIcon: { showTopIcon: {
type: Boolean, type: Boolean,
default: true default: true
@ -132,6 +253,30 @@ export default {
.top-icon { .top-icon {
display: inline-block; display: inline-block;
width: calc(56px * var(--beilv)); 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> </style>

8
src/views/QualityManager/components/TechyTable.vue
View File

@ -200,13 +200,13 @@ export default {
} }
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) { .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e; /* background-color: #0e203e; */
/* background-color: #0e203e90; */ background-color: #0e203ecc;
} }
.visual-base-table-container >>> .el-table tbody tr:nth-child(even), .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead { .visual-base-table-container >>> .el-table thead {
background-color: #203760; /* background-color: #203760; */
/* background-color: #20376090; */ background-color: #213961cc;
} }
</style> </style>

64
src/views/QualityManager/components/charts/PlFaultAnalysisPieChart.vue
View File

@ -108,6 +108,7 @@ export default {
configs: { configs: {
title: { title: {
textAlign: 'center', textAlign: 'center',
textVerticalAlign: 'middle',
left: '69%', left: '69%',
top: '46%', top: '46%',
text: '', text: '',
@ -120,8 +121,7 @@ export default {
subtext: '总数/片', subtext: '总数/片',
subtextStyle: { subtextStyle: {
color: '#fff', color: '#fff',
fontSize: 12, fontSize: 12
fontWeight: 'lighter'
} }
}, },
legend: { legend: {
@ -132,6 +132,7 @@ export default {
icon: 'none', icon: 'none',
itemGap: 8, itemGap: 8,
itemWidth: 10, itemWidth: 10,
// 在下面动态设置
formatter: name => { formatter: name => {
const testData = this.dataList const testData = this.dataList
@ -300,48 +301,55 @@ export default {
const fs5 = this.calcFontsize(5 /** px*/) const fs5 = this.calcFontsize(5 /** px*/)
const fs8 = this.calcFontsize(8 /** px*/) const fs8 = this.calcFontsize(8 /** px*/)
const fs10 = this.calcFontsize(10 /** px*/) const fs10 = this.calcFontsize(10 /** px*/)
const fs14 = this.calcFontsize(14 /** px*/) const fs12 = this.calcFontsize(12 /** px*/)
const fs13 = this.calcFontsize(13 /** px*/)
const fs18 = this.calcFontsize(18 /** px*/) const fs18 = this.calcFontsize(18 /** px*/)
const fs20 = this.calcFontsize(20 /** px*/)
const legendTextFixWidth = this.calcFontsize(56 /** px*/)
const legnedTop = this.calcFontsize(64 /** px*/)
const legendTopRate = this.calcFontsize(30 /** % */) const legendTopRate = this.calcFontsize(30 /** % */)
this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0) this.configs.title.text = this.dataList.reduce((prev, curr) => prev + curr.value * 1000, 0)
this.configs.title.textStyle.fontSize = fs18 this.configs.title.textStyle.fontSize = fs20
this.configs.title.subtextStyle.fontSize = fs14 this.configs.title.subtextStyle.fontSize = fs13
this.configs.legend.top = legendTopRate + '%' // this.configs.legend.top = legendTopRate + '%'
this.configs.legend.top = legnedTop
this.configs.legend.left = 0 + '%' this.configs.legend.left = 0 + '%'
this.configs.legend.itemGap = fs8 this.configs.legend.itemGap = fs8
this.configs.legend.itemWidth = fs10 this.configs.legend.itemWidth = fs8
this.configs.legend.textStyle.rich.a.fontSize = fs10 this.configs.legend.textStyle.rich.a.fontSize = fs12
this.configs.legend.textStyle.rich.a.lineHeight = fs10 this.configs.legend.textStyle.rich.a.lineHeight = fs12
this.configs.legend.textStyle.rich.b.fontSize = fs10 this.configs.legend.textStyle.rich.a.width = legendTextFixWidth
this.configs.legend.textStyle.rich.b.fontSize = fs12
this.configs.legend.textStyle.rich.b.width = legendTextFixWidth
// this.configs.legend.textStyle.rich.b.lineHeight = fs16 // this.configs.legend.textStyle.rich.b.lineHeight = fs16
this.configs.legend.textStyle.rich.c.width = fs10 this.configs.legend.textStyle.rich.c.width = fs8
this.configs.legend.textStyle.rich.c.height = fs10 this.configs.legend.textStyle.rich.c.height = fs8
this.configs.legend.textStyle.rich.c.borderRadius = fs5 this.configs.legend.textStyle.rich.c.borderRadius = fs5
this.configs.legend.textStyle.rich.d.width = fs10 this.configs.legend.textStyle.rich.d.width = fs8
this.configs.legend.textStyle.rich.d.height = fs10 this.configs.legend.textStyle.rich.d.height = fs8
this.configs.legend.textStyle.rich.d.borderRadius = fs5 this.configs.legend.textStyle.rich.d.borderRadius = fs5
this.configs.legend.textStyle.rich.e.width = fs10 this.configs.legend.textStyle.rich.e.width = fs8
this.configs.legend.textStyle.rich.e.height = fs10 this.configs.legend.textStyle.rich.e.height = fs8
this.configs.legend.textStyle.rich.e.borderRadius = fs5 this.configs.legend.textStyle.rich.e.borderRadius = fs5
this.configs.legend.textStyle.rich.f.width = fs10 this.configs.legend.textStyle.rich.f.width = fs8
this.configs.legend.textStyle.rich.f.height = fs10 this.configs.legend.textStyle.rich.f.height = fs8
this.configs.legend.textStyle.rich.f.borderRadius = fs5 this.configs.legend.textStyle.rich.f.borderRadius = fs5
this.configs.legend.textStyle.rich.g.width = fs10 this.configs.legend.textStyle.rich.g.width = fs8
this.configs.legend.textStyle.rich.g.height = fs10 this.configs.legend.textStyle.rich.g.height = fs8
this.configs.legend.textStyle.rich.g.borderRadius = fs5 this.configs.legend.textStyle.rich.g.borderRadius = fs5
this.configs.legend.textStyle.rich.h.width = fs10 this.configs.legend.textStyle.rich.h.width = fs8
this.configs.legend.textStyle.rich.h.height = fs10 this.configs.legend.textStyle.rich.h.height = fs8
this.configs.legend.textStyle.rich.h.borderRadius = fs5 this.configs.legend.textStyle.rich.h.borderRadius = fs5
this.configs.series[0].label.rich.first.fontSize = fs10 this.configs.series[0].label.rich.first.fontSize = fs12
this.configs.series[0].label.rich.second.fontSize = fs10 this.configs.series[0].label.rich.second.fontSize = fs12
this.configs.series[0].label.rich.third.fontSize = fs10 this.configs.series[0].label.rich.third.fontSize = fs12
this.configs.series[0].label.rich.fourth.fontSize = fs10 this.configs.series[0].label.rich.fourth.fontSize = fs12
this.configs.series[0].label.rich.fifth.fontSize = fs10 this.configs.series[0].label.rich.fifth.fontSize = fs12
this.configs.series[0].label.rich.sixth.fontSize = fs10 this.configs.series[0].label.rich.sixth.fontSize = fs12
if (datalist) this.configs.series[0].data = datalist if (datalist) this.configs.series[0].data = datalist
this.chart.setOption(this.configs) this.chart.setOption(this.configs)
} }

7
src/views/QualityManager/components/charts/newBar.vue
View File

@ -250,14 +250,15 @@ export default {
containLabel: true containLabel: true
}, },
legend: { legend: {
itemWidth: 8, show: false,
itemHeight: 8, itemWidth: 10,
itemHeight: 10,
selectedMode: false, selectedMode: false,
top: '7%', top: '7%',
right: '2%', right: '2%',
textStyle: { textStyle: {
color: '#fff9', color: '#fff9',
fontSize: 10 fontSize: 12
} }
}, },
xAxis: { xAxis: {

32
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" /> <div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: 100%;" />
</template> </template>
<script> <script>
@ -31,10 +31,10 @@ export default {
} }
}, },
grid: { grid: {
top: '18%', top: '25%',
left: '2%', left: '2%',
right: '2%', right: '5%',
bottom: '2%', bottom: '5%',
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
@ -51,7 +51,7 @@ export default {
textStyle: { textStyle: {
color: 'rgba(255,255,255,1)' // color: 'rgba(255,255,255,1)' //
}, },
margin: 20 margin: 12
}, },
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
} }
@ -60,9 +60,11 @@ export default {
{ {
name: '成品率', name: '成品率',
type: 'value', type: 'value',
min: 'dataMin',
splitNumber: 4,
nameTextStyle: { nameTextStyle: {
color: 'rgba(255,255,255,0.7)', color: 'rgba(255,255,255,0.7)',
fontSize: 10, fontSize: 12,
align: 'right' align: 'right'
}, },
axisLine: { axisLine: {
@ -120,6 +122,9 @@ export default {
}, },
data: [11, 199, 140, 63, 185, 5, 78].map(_ => { data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
let v = Math.floor(Math.random() * 100) let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v return v
}) })
}, },
@ -154,6 +159,9 @@ export default {
}, },
data: [151, 57, 31, 7, 77, 88, 119].map(_ => { data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
let v = Math.floor(Math.random() * 100) let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v return v
}) })
}, },
@ -188,6 +196,9 @@ export default {
}, },
data: [58, 3, 67, 100, 42, 96, 124].map(_ => { data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
let v = Math.floor(Math.random() * 100) let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v return v
}) })
}, },
@ -222,6 +233,9 @@ export default {
}, },
data: [92, 88, 122, 169, 108, 130, 147].map(_ => { data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
let v = Math.floor(Math.random() * 100) let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v return v
}) })
}, },
@ -260,6 +274,9 @@ export default {
}, },
data: [44, 40, 118, 197, 123, 95, 96].map(_ => { data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
let v = Math.floor(Math.random() * 100) let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v return v
}) })
} }
@ -294,6 +311,9 @@ export default {
this.configs.series.forEach(item => { this.configs.series.forEach(item => {
item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => { item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
let v = Math.floor(Math.random() * 100) let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v return v
}) })
}) })

50
src/views/QualityManager/mockData.js
View File

@ -30,29 +30,29 @@ const PriorityComponent = {
console.log(this.injectData.priority) console.log(this.injectData.priority)
}, },
methods: {}, methods: {},
render: function(h) { render: function (h) {
return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText) return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
} }
} }
console.log('is component?', PriorityComponent) console.log('is component?', PriorityComponent)
export const qualityTableProps = [ export const qualityTableProps = [
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center', 'min-width': 55 }, { label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
{ label: '所属产线', width: 130, prop: 'pl', align: 'center', 'min-width': 55 }, { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
{ label: '异常内容', align: 'center', prop: 'content', 'min-width': 55 }, { label: '异常内容', align: 'center', prop: 'content', 'min-width': 50 },
{ label: '班组', width: 120, prop: 'team', align: 'center', 'min-width': 55 }, { label: '班组', prop: 'team', align: 'center', 'min-width': 45 },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 } { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 }
] ]
export const qualityDatalist = [ export const qualityDatalist = [
{ 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 }, { 'wsName': '原片', 'pl': 'B', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 13:36:26', 'priority': 3 },
{ 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 4 }, { 'wsName': '下片铺纸', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 11:35:02', 'priority': 2 },
{ 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 }, { 'wsName': '镀膜', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:10:02', 'priority': 1 },
{ 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 4 }, { 'wsName': '丝印', 'pl': 'A', 'content': '透过率', 'team': '白班', 'time': '2022-11-18 02:16:20', 'priority': 2 },
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 4 }, { 'wsName': '上片磨边', 'pl': 'A', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 00:03:54', 'priority': 3 },
{ 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 4 }, { 'wsName': '丝印', 'pl': 'B', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 09:25:49', 'priority': 1 },
{ 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 }, { 'wsName': '上片磨边', 'pl': 'A', 'content': '完整性', 'team': '夜班', 'time': '2022-11-18 13:54:45', 'priority': 3 },
{ 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 }, { 'wsName': '包装', 'pl': 'B', 'content': '完整性', 'team': '白班', 'time': '2022-11-18 03:47:23', 'priority': 1 },
{ 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 }, { 'wsName': '包装', 'pl': 'B', 'content': '透过率', 'team': '夜班', 'time': '2022-11-18 02:46:21', 'priority': 1 },
@ -96,30 +96,28 @@ const StatusComponent = {
][this.injectData.status - 1] ][this.injectData.status - 1]
} }
}, },
render: function(h) { render: function (h) {
return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [ return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''), h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''),
h('span', this.statusText) h('span', this.statusText)
]) ])
} }
} }
export const qualityExceptionTableProps = [ export const qualityExceptionTableProps = [
{ label: '工序名称', prop: 'wsName', align: 'center', width: 128 }, { label: '工序名称', prop: 'wsName', align: 'center', 'min-width': 55 },
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 }, { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 50 },
{ label: '异常内容', prop: 'content', align: 'center', 'min-width': 55 }, { label: '异常内容', prop: 'content', align: 'center', 'min-width': 50 },
{ label: '设备', prop: 'eq', align: 'center', width: 100 }, { label: '设备', prop: 'eq', align: 'center', 'min-width': 55 },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 } { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 55 },
// { label: '处理人', prop: 'charger', align: 'center', width: 100 },
// { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 150 }
] ]
export const qualityExceptionDatalist = [ export const qualityExceptionDatalist = [
{ 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 4 }, { 'pl': 'A', 'eq': '打孔', 'wsName': '打孔', 'content': '完整性', 'time': '2022-11-18 11:30:01', 'priority': 3 },
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 4 }, { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '透过率', 'time': '2022-11-18 07:20:35', 'priority': 1 },
{ 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 }, { 'pl': 'B', 'eq': '钢后清洗机', 'wsName': '钢后清洗机', 'content': '透过率', 'time': '2022-11-18 09:16:21', 'priority': 2 },
{ 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 4 }, { 'pl': 'A', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 04:57:10', 'priority': 3 },
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 }, { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 08:26:43', 'priority': 2 },
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 }, { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 04:09:39', 'priority': 2 },
{ 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 }, { 'pl': 'B', 'eq': '下片', 'wsName': '下片', 'content': '透过率', 'time': '2022-11-18 01:06:05', 'priority': 2 },
@ -131,7 +129,7 @@ export const qualityExceptionDatalist = [
{ 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 }, { 'pl': 'B', 'eq': '钢化', 'wsName': '钢化', 'content': '完整性', 'time': '2022-11-18 09:23:40', 'priority': 1 },
{ 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 }, { 'pl': 'A', 'eq': '冷却', 'wsName': '冷却', 'content': '透过率', 'time': '2022-11-18 05:28:05', 'priority': 2 },
{ 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 }, { 'pl': 'B', 'eq': '上片', 'wsName': '上片', 'content': '完整性', 'time': '2022-11-18 06:24:57', 'priority': 3 },
{ 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 4 }, { 'pl': 'B', 'eq': '固化', 'wsName': '固化', 'content': '完整性', 'time': '2022-11-18 02:48:28', 'priority': 3 },
{ 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 }, { 'pl': 'B', 'eq': '磨边后清洗机', 'wsName': '磨边后清洗机', 'content': '完整性', 'time': '2022-11-18 13:06:35', 'priority': 1 },
{ 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透过率', 'time': '2022-11-18 11:49:59', 'priority': 1 }, { 'pl': 'B', 'eq': '打孔', 'wsName': '打孔', 'content': '透过率', 'time': '2022-11-18 11:49:59', 'priority': 1 },
{ 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 12:32:20', 'priority': 2 }, { 'pl': 'B', 'eq': '一镀', 'wsName': '一镀', 'content': '透过率', 'time': '2022-11-18 12:32:20', 'priority': 2 },