update 设备数据

src/views/EquipmentManager/HomePage.vue

@@ -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,
+  suddenMaintainProps,
-  rightSideDatalist
+  inPlanMaintainProps,
+  defenceMaintainProps,
+  wwwOrderProps,
+  rightSideDatalist,
+  rightSideDatalist2,
+  rightSideDatalist3,
+  rightSideDatalist4
 } from './mockData'
 
 import { mapGetters } from 'vuex'
@@ -171,8 +177,14 @@ export default {
       equipmentAnalysisData,
       sparepartsProps,
       sparepartsDatalist,
-      rightSideProps,
+      suddenMaintainProps,
-      rightSideDatalist
+      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));
+  gap: calc(32px * var(--beilv));
-  height: calc(100% - 4vh);
+  height: calc(100% - 3vh);
   /* overflow-y: scroll; */
   overflow-y: auto;
 }
 .techy-container__inner > div {
-  flex: 1 1;
+  flex: 0;
 }
 
 .row-1,

src/views/EquipmentManager/components/TechyAnalysisHeader.vue

@@ -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"
+                    width="100%"
-                    height="13px"
+                    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"
+                    width="100%"
-                    height="13px"
+                    height="100%"
                     viewBox="0 0 56 13"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"

src/views/EquipmentManager/components/TechyVerticalTable.vue

@@ -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%;
+  min-width: 24%;
-  color: rgba(255, 255, 255, 0.7);
+  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 {

src/views/EquipmentManager/mockData.js

@@ -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 },
+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" },
+]
+
+