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>
<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,

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

@ -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"

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

@ -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 {

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

@ -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: 'pl', label: '产线名称' },
{ prop: 'time', label: '时间' },
{ prop: 'eq', label: '设备名称' },
{ prop: 'status', label: '完成情况', subcomponent: StatusComponent },
{ prop: 'charger', label: '执行人' },
{ prop: 'team', label: '班组' },
{ prop: 'duration', 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 },
// 计划内保养
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: '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" },
]