@@ -96,19 +96,19 @@ | |||
<div class="techy-container__inner"> | |||
<div> | |||
<TechyAnalysisHeader>突发性维护</TechyAnalysisHeader> | |||
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> | |||
<TechyVerticalTable key="1" :table-props="suddenMaintainProps" :data-list="rightSideDatalist" /> | |||
</div> | |||
<div> | |||
<TechyAnalysisHeader>计划内保养</TechyAnalysisHeader> | |||
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> | |||
<TechyVerticalTable key="2" :table-props="inPlanMaintainProps" :data-list="rightSideDatalist2" /> | |||
</div> | |||
<div> | |||
<TechyAnalysisHeader>防御性维护</TechyAnalysisHeader> | |||
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> | |||
<TechyVerticalTable key="3" :table-props="defenceMaintainProps" :data-list="rightSideDatalist3" /> | |||
</div> | |||
<div> | |||
<TechyAnalysisHeader>点检工单</TechyAnalysisHeader> | |||
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> | |||
<TechyVerticalTable key="4" :table-props="wwwOrderProps" :data-list="rightSideDatalist4" /> | |||
</div> | |||
</div> | |||
</techy-container> | |||
@@ -136,8 +136,14 @@ import { | |||
equipmentAnalysisData, | |||
sparepartsProps, | |||
sparepartsDatalist, | |||
rightSideProps, | |||
rightSideDatalist | |||
suddenMaintainProps, | |||
inPlanMaintainProps, | |||
defenceMaintainProps, | |||
wwwOrderProps, | |||
rightSideDatalist, | |||
rightSideDatalist2, | |||
rightSideDatalist3, | |||
rightSideDatalist4 | |||
} from './mockData' | |||
import { mapGetters } from 'vuex' | |||
@@ -171,8 +177,14 @@ export default { | |||
equipmentAnalysisData, | |||
sparepartsProps, | |||
sparepartsDatalist, | |||
rightSideProps, | |||
rightSideDatalist | |||
suddenMaintainProps, | |||
inPlanMaintainProps, | |||
defenceMaintainProps, | |||
wwwOrderProps, | |||
rightSideDatalist, | |||
rightSideDatalist2, | |||
rightSideDatalist3, | |||
rightSideDatalist4 | |||
// refreshKey: 0 | |||
} | |||
}, | |||
@@ -268,13 +280,13 @@ export default { | |||
.techy-container__inner { | |||
display: flex; | |||
flex-direction: column; | |||
gap: calc(8px * var(--beilv)); | |||
height: calc(100% - 4vh); | |||
gap: calc(32px * var(--beilv)); | |||
height: calc(100% - 3vh); | |||
/* overflow-y: scroll; */ | |||
overflow-y: auto; | |||
} | |||
.techy-container__inner > div { | |||
flex: 1 1; | |||
flex: 0; | |||
} | |||
.row-1, | |||
@@ -1,17 +1,17 @@ | |||
<template> | |||
<div class="techy-analysis-header"> | |||
<span v-html="titleLeftSVG" /> | |||
<span style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));" v-html="titleLeftSVG" /> | |||
<span class="techy-analysis-header__title"> | |||
<slot /> | |||
</span> | |||
<span v-html="titleRightSVG" /> | |||
<span style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));" v-html="titleRightSVG" /> | |||
</div> | |||
</template> | |||
<script> | |||
const titleLeftSVG = `<svg | |||
width="56px" | |||
height="13px" | |||
width="100%" | |||
height="100%" | |||
viewBox="0 0 56 13" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -59,8 +59,8 @@ const titleLeftSVG = `<svg | |||
</g> | |||
</svg>` | |||
const titleRightSVG = `<svg | |||
width="56px" | |||
height="13px" | |||
width="100%" | |||
height="100%" | |||
viewBox="0 0 56 13" | |||
version="1.1" | |||
xmlns="http://www.w3.org/2000/svg" | |||
@@ -49,18 +49,21 @@ export default { | |||
width: 100%; | |||
white-space: nowrap; | |||
display: flex; | |||
justify-content: center; | |||
/* justify-content: center; */ | |||
justify-content: stretch; | |||
align-items: stretch; | |||
margin-bottom: 1px; | |||
} | |||
.trow:not(:last-of-type) { | |||
border-bottom: 1px solid #0d1728; | |||
} | |||
.thead, | |||
.tbody { | |||
/* min-width: calc(100vw / 1920 * 96); */ | |||
background-color: #20376080; | |||
background-color: rgba(33, 57, 97, 0.8); | |||
white-space: nowrap; | |||
overflow: hidden; | |||
margin-right: 1px; | |||
text-align: left; | |||
padding-left: calc(12px * var(--beilv)); | |||
padding-right: calc(12px * var(--beilv)); | |||
@@ -70,16 +73,20 @@ export default { | |||
} | |||
.thead { | |||
width: 25%; | |||
min-width: 25%; | |||
font-size: calc(14px * var(--beilv)); | |||
line-height: 1.8; | |||
/* line-height: 1.8; */ | |||
line-height: 2.1; | |||
flex: 0; | |||
} | |||
.tbody { | |||
width: 24%; | |||
color: rgba(255, 255, 255, 0.7); | |||
min-width: 24%; | |||
color: rgba(255, 255, 255, 0.8); | |||
font-size: calc(12px * var(--beilv)); | |||
line-height: 2; | |||
/* line-height: 2; */ | |||
line-height: 2.3; | |||
flex: 1 0; | |||
} | |||
.tbody:last-child { | |||
@@ -214,24 +214,68 @@ const StatusComponent = { | |||
}, | |||
render: function (h) { | |||
return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' } }, [ | |||
h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%', marginRight: 'calc(8px * var(--beilv))' } }, ''), | |||
h('span', { style: { width: 'calc(16px * var(--beilv))', height: 'calc(16px * var(--beilv))', background: `url(${this.statusColor}) no-repeat`, backgroundPosition: '20%', backgroundSize: '100%', marginRight: 'calc(4px * var(--beilv))' } }, ''), | |||
h('span', this.statusText) | |||
]) | |||
} | |||
} | |||
export const rightSideProps = [ | |||
// 突发性维护 | |||
export const suddenMaintainProps = [ | |||
{ prop: 'orderId', label: '工单编号' }, | |||
{ prop: 'time', label: '时间' }, | |||
{ prop: 'eq', label: '设备名称' }, | |||
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent }, | |||
{ prop: 'team', label: '班组' }, | |||
{ prop: 'duration', label: '时长' } | |||
] | |||
// 计划内保养 | |||
export const inPlanMaintainProps = [ | |||
{ prop: 'orderId', label: '工单编号' }, | |||
{ prop: 'pl', label: '产线名称' }, | |||
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent }, | |||
{ prop: 'team', label: '班组' }, | |||
{ prop: 'duration', label: '时长' } | |||
] | |||
// 防御性维护 | |||
export const defenceMaintainProps = [ | |||
{ prop: 'orderId', label: '工单编号' }, | |||
{ prop: 'eq', label: '设备名称' }, | |||
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent }, | |||
{ prop: 'charger', label: '执行人' }, | |||
{ prop: 'team', label: '班组' }, | |||
{ prop: 'duration', label: '时长' } | |||
] | |||
// 点检工单 | |||
export const wwwOrderProps = [ | |||
{ prop: 'orderId', label: '工单编号' }, | |||
{ prop: 'pl', label: '产线名称' }, | |||
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent }, | |||
{ prop: 'team', label: '班组' }, | |||
{ prop: 'time', label: '时间' } | |||
] | |||
export const rightSideDatalist = [ | |||
{ 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 1, 'charger': '任洋', 'duration': 5 }, | |||
{ 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 1, 'charger': '廖丽', 'duration': 6 }, | |||
{ 'orderId': 'OD_125', 'eq': 'A钢化炉', 'pl': 'E线', 'status': 3, 'charger': '赖秀兰', 'duration': 2 } | |||
// { "orderId": "OD_7103", "pl": "C线", "status": 3, "charger": "邱伟", "duration": 7 }, | |||
{ "orderId": "WOD20200807030135", "time": "2021-02-12 14:08:04", "eq": "磨边", "status": 3, "team": "白班", "duration": "26min" }, | |||
{ "orderId": "WOD20200413103728", "time": "2020-11-26 20:11:39", "eq": "固化", "status": 1, "team": "夜班", "duration": "24min" }, | |||
{ "orderId": "WOD20210217143647", "time": "2021-08-15 18:48:40", "eq": "预热", "status": 2, "team": "白班", "duration": "27min" }, | |||
] | |||
export const rightSideDatalist2 = [ | |||
{ "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" }, | |||
{ "orderId": "WOD20211026022742", "pl": "A", "status": 2, "team": "夜班", "duration": "28min" }, | |||
{ "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" }, | |||
] | |||
export const rightSideDatalist3 = [ | |||
{ "orderId": "WOD20210829073921", "eq": "钢后清洗机", "status": 2, "team": "白班", "duration": "29min" }, | |||
{ "orderId": "WOD20220429180823", "eq": "丝印", "status": 2, "team": "夜班", "duration": "26min" }, | |||
{ "orderId": "WOD20220915050149", "eq": "磨边后清洗机", "status": 3, "team": "白班", "duration": "21min" }, | |||
] | |||
export const rightSideDatalist4 = [ | |||
{ "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2021-12-17 13:31:24" }, | |||
{ "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-06-27 10:52:19" }, | |||
{ "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" }, | |||
] | |||