update 修改设备管理

src/views/EquipmentManager/components/TechyHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <div class="center-header">
-    <span class="techy-header__title">{{ headTitle }}</span>
+      <img class="logo-img" src="./logo.png" alt="cnbm">
+      <span class="techy-header__title">{{ headTitle }}</span>
+    </div>
 
     <!-- <div class="date">2022.10.14</div>
     <div class="time">20:12:24</div> -->
@@ -102,11 +104,19 @@ export default {
   /* background-position: bottom left 40px;  */
   /* background-size: cover; */
   background-size: 100% 100%;
-  /* background-position: bottom left calc(100vw / 1920 * 40); */
+  background-position: bottom;
-  background-position: bottom left calc(32px * var(--beilv));
+  /* background-position: bottom left calc(32px * var(--beilv)); */
   height: calc(96px * var(--beilv));
 }
 
+.center-header {
+  /* transform: translateX(calc(-18px * var(--beilv))); */
+  transform: translateX(-8%) translateY(18%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .logo-img {
   width: calc(28px * var(--beilv));
 }

src/views/EquipmentManager/components/TechyTable.vue

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="visual-base-table-container">
-    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
+    <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -200,11 +200,12 @@ export default {
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
-  background-color: #0e203e90;
+  background-color: #0e203e;
+  /* background-color: #0e203e; */
 }
 
 .visual-base-table-container >>> .el-table tbody tr:nth-child(even),
 .visual-base-table-container >>> .el-table thead {
-  background-color: #20376090;
+  background-color: #203760;
 }
 </style>

src/views/EquipmentManager/components/TechyVerticalTable.vue

@@ -76,6 +76,9 @@ export default {
   color: rgba(255, 255, 255, 0.7);
   font-size: calc(12px *  var(--beilv));
   line-height: 2;
+  text-align: left;
+  padding-left: calc(12px * var(--beilv));
+  padding-right: calc(12px * var(--beilv));
 }
 
 .tbody:last-child {

src/views/EquipmentManager/mockData.js

@@ -27,8 +27,8 @@ const PriorityComponent = {
     }
   },
   methods: {},
-  render: function (h) {
+  render: function(h) {
-    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
+    return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText)
   }
 }
 
@@ -38,7 +38,7 @@ export const equipmentExceptionProps = [
   { label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
   { label: '报修/发现人', prop: 'creator', align: 'center', width: 110 },
   { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 },
+  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 60 }
 ]
 
 export const equipmentExceptionDatalist = [
@@ -70,12 +70,12 @@ const LifeRemainComponent = {
     }
 
   },
-  render: function (h) {
+  render: function(h) {
     return h('span', {
       style:
         { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
     },
-      this.injectData.remain)
+    this.injectData.remain)
   }
 }
 
@@ -117,7 +117,7 @@ export const equipmentAnalysisData = [
   { 'name': '磨边单元', 'oee': '0.51', 'mtbr': '0.85', 'mtbf': '0.22' },
   { 'name': '丝印', 'oee': '0.75', 'mtbr': '0.92', 'mtbf': '0.93' },
   { 'name': '上片机器人', 'oee': '0.89', 'mtbr': '0.25', 'mtbf': '0.26' },
-  { 'name': '激光打印', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
+  { 'name': '激光打孔', 'oee': '0.05', 'mtbr': '0.59', 'mtbf': '0.15' },
   { 'name': '镀膜', 'oee': '0.55', 'mtbr': '0.85', 'mtbf': '0.65' }
 ]
 
@@ -172,9 +172,9 @@ const StatusComponent = {
       ][this.injectData.status - 1]
     }
   },
-  render: function (h) {
+  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+    return h('span', { style: { display: 'flex', /** justifyContent: 'center', */ alignItems: 'center', color: '#ffffffb3' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''),
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' }}, ''),
       h('span', this.statusText)
     ])
   }

src/views/QualityManager/components/TechyHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <header class="techy-header">
-    <img class="logo-img" src="./logo.png" alt="cnbm" />
+    <div class="center-header">
-    <span class="techy-header__title">{{ headTitle }}</span>
+      <img class="logo-img" src="./logo.png" alt="cnbm">
+      <span class="techy-header__title">{{ headTitle }}</span>
+    </div>
 
     <!-- <div class="date">2022.10.14</div>
     <div class="time">20:12:24</div> -->
@@ -52,8 +54,6 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
         </g>
     </g>
 </svg>`
-
-
 export default {
   name: 'TechyHeader',
   props: ['headTitle'],
@@ -104,11 +104,19 @@ export default {
   /* background-position: bottom left 40px;  */
   /* background-size: cover; */
   background-size: 100% 100%;
-  /* background-position: bottom left calc(100vw / 1920 * 40); */
+  background-position: bottom;
-  background-position: bottom left calc(32px * var(--beilv));
+  /* background-position: bottom left calc(32px * var(--beilv)); */
   height: calc(96px * var(--beilv));
 }
 
+.center-header {
+  /* transform: translateX(calc(-18px * var(--beilv))); */
+  transform: translateX(-8%) translateY(18%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .logo-img {
   width: calc(28px * var(--beilv));
 }