update 设备数据

2022-11-16 17:00:33 +08:00 · 2022-11-16 17:00:33 +08:00 · 4f4453045a
--- a/src/views/EquipmentManager/HomePage.vue
+++ b/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,
-  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,
--- a/src/views/EquipmentManager/components/TechyAnalysisHeader.vue
+++ b/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"
-                    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"
--- a/src/views/EquipmentManager/components/TechyVerticalTable.vue
+++ b/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%;
-  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 {
--- a/src/views/EquipmentManager/mockData.js
+++ b/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 },
-  { '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" },
+]
+
+