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

lb #12

Merged
gtz217 merged 27 commits from lb into master 2022-11-18 17:04:51 +08:00
Conversation 0 Commits 27 Files Changed 33 +98 -35
4 changed files with 98 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4f4453045a - Show all commits

34
src/views/EquipmentManager/HomePage.vue
View File

@ -96,19 +96,19 @@
<div class="techy-container__inner"> <div class="techy-container__inner">
<div> <div>
<TechyAnalysisHeader>突发性维护</TechyAnalysisHeader> <TechyAnalysisHeader>突发性维护</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> <TechyVerticalTable key="1" :table-props="suddenMaintainProps" :data-list="rightSideDatalist" />
</div> </div>
<div> <div>
<TechyAnalysisHeader>计划内保养</TechyAnalysisHeader> <TechyAnalysisHeader>计划内保养</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> <TechyVerticalTable key="2" :table-props="inPlanMaintainProps" :data-list="rightSideDatalist2" />
</div> </div>
<div> <div>
<TechyAnalysisHeader>防御性维护</TechyAnalysisHeader> <TechyAnalysisHeader>防御性维护</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> <TechyVerticalTable key="3" :table-props="defenceMaintainProps" :data-list="rightSideDatalist3" />
</div> </div>
<div> <div>
<TechyAnalysisHeader>点检工单</TechyAnalysisHeader> <TechyAnalysisHeader>点检工单</TechyAnalysisHeader>
<TechyVerticalTable :table-props="rightSideProps" :data-list="rightSideDatalist" /> <TechyVerticalTable key="4" :table-props="wwwOrderProps" :data-list="rightSideDatalist4" />
</div> </div>
</div> </div>
</techy-container> </techy-container>
@ -136,8 +136,14 @@ import {
equipmentAnalysisData, equipmentAnalysisData,
sparepartsProps, sparepartsProps,
sparepartsDatalist, sparepartsDatalist,
rightSideProps, suddenMaintainProps,
rightSideDatalist inPlanMaintainProps,
defenceMaintainProps,
wwwOrderProps,
rightSideDatalist,
rightSideDatalist2,
rightSideDatalist3,
rightSideDatalist4
} from './mockData' } from './mockData'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@ -171,8 +177,14 @@ export default {
equipmentAnalysisData, equipmentAnalysisData,
sparepartsProps, sparepartsProps,
sparepartsDatalist, sparepartsDatalist,
rightSideProps, suddenMaintainProps,
rightSideDatalist inPlanMaintainProps,
defenceMaintainProps,
wwwOrderProps,
rightSideDatalist,
rightSideDatalist2,
rightSideDatalist3,
rightSideDatalist4
// refreshKey: 0 // refreshKey: 0
} }
}, },
@ -268,13 +280,13 @@ export default {
.techy-container__inner { .techy-container__inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: calc(8px * var(--beilv)); gap: calc(32px * var(--beilv));
height: calc(100% - 4vh); height: calc(100% - 3vh);
/* overflow-y: scroll; */ /* overflow-y: scroll; */
overflow-y: auto; overflow-y: auto;
} }
.techy-container__inner > div { .techy-container__inner > div {
flex: 1 1; flex: 0;
} }
.row-1, .row-1,

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

@ -1,17 +1,17 @@
<template> <template>
<div class="techy-analysis-header"> <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"> <span class="techy-analysis-header__title">
<slot /> <slot />
</span> </span>
<span v-html="titleRightSVG" /> <span style="display: inline-block; width: calc(56px * var(--beilv)); height: calc(13px * var(--beilv));" v-html="titleRightSVG" />
</div> </div>
</template> </template>
<script> <script>
const titleLeftSVG = `<svg const titleLeftSVG = `<svg
width="56px" width="100%"
height="13px" height="100%"
viewBox="0 0 56 13" viewBox="0 0 56 13"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -59,8 +59,8 @@ const titleLeftSVG = `<svg
</g> </g>
</svg>` </svg>`
const titleRightSVG = `<svg const titleRightSVG = `<svg
width="56px" width="100%"
height="13px" height="100%"
viewBox="0 0 56 13" viewBox="0 0 56 13"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

25
src/views/EquipmentManager/components/TechyVerticalTable.vue
View File

@ -49,18 +49,21 @@ export default {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
justify-content: center; /* justify-content: center; */
justify-content: stretch;
align-items: stretch; align-items: stretch;
margin-bottom: 1px; }
.trow:not(:last-of-type) {
border-bottom: 1px solid #0d1728;
} }
.thead, .thead,
.tbody { .tbody {
/* min-width: calc(100vw / 1920 * 96); */ /* min-width: calc(100vw / 1920 * 96); */
background-color: #20376080; background-color: rgba(33, 57, 97, 0.8);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
margin-right: 1px;
text-align: left; text-align: left;
padding-left: calc(12px * var(--beilv)); padding-left: calc(12px * var(--beilv));
padding-right: calc(12px * var(--beilv)); padding-right: calc(12px * var(--beilv));
@ -70,16 +73,20 @@ export default {
} }
.thead { .thead {
width: 25%; min-width: 25%;
font-size: calc(14px * var(--beilv)); font-size: calc(14px * var(--beilv));
line-height: 1.8; /* line-height: 1.8; */
line-height: 2.1;
flex: 0;
} }
.tbody { .tbody {
width: 24%; min-width: 24%;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.8);
font-size: calc(12px * var(--beilv)); font-size: calc(12px * var(--beilv));
line-height: 2; /* line-height: 2; */
line-height: 2.3;
flex: 1 0;
} }
.tbody:last-child { .tbody:last-child {

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

@ -214,24 +214,68 @@ const StatusComponent = {
}, },
render: function (h) { render: function (h) {
return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' } }, [ 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) h('span', this.statusText)
]) ])
} }
} }
export const rightSideProps = [ // 突发性维护
export const suddenMaintainProps = [
{ prop: 'orderId', label: '工单编号' }, { prop: 'orderId', label: '工单编号' },
{ prop: 'pl', label: '产线名称' }, { prop: 'time', label: '时间' },
{ prop: 'eq', label: '设备名称' }, { prop: 'eq', label: '设备名称' },
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent }, { prop: 'status', label: '完成情况', subcomponent: StatusComponent },
{ prop: 'charger', label: '执行人' }, { prop: 'team', label: '班组' },
{ prop: 'duration', label: '时长' } { prop: 'duration', label: '时长' }
] ]
export const rightSideDatalist = [ // 计划内保养
{ 'orderId': 'OD_3719', 'eq': 'A2一次固化机', 'pl': 'E线', 'status': 1, 'charger': '任洋', 'duration': 5 }, export const inPlanMaintainProps = [
{ 'orderId': 'OD_6564', 'eq': 'B1二次镀膜机', 'pl': 'D线', 'status': 1, 'charger': '廖丽', 'duration': 6 }, { prop: 'orderId', label: '工单编号' },
{ 'orderId': 'OD_125', 'eq': 'A钢化炉', 'pl': 'E线', 'status': 3, 'charger': '赖秀兰', 'duration': 2 } { prop: 'pl', label: '产线名称' },
// { "orderId": "OD_7103", "pl": "C线", "status": 3, "charger": "邱伟", "duration": 7 }, { 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: '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": "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" },
]