From 9e7747dde9aa0a5a1f0e66f571138c9c1e8ed752 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 11 Nov 2022 14:39:16 +0800
Subject: [PATCH] =?UTF-8?q?update=203d=20=E7=9A=84=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftContentEquipmentCheck.vue  | 64 ++++++++++---------
 .../components/RightContentAlert.vue          | 39 ++++++++---
 src/views/3DOverview/components/TechyBox.vue  |  4 +-
 src/views/3DOverview/index.vue                | 22 +++----
 4 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
index 91e6678..ca95f73 100644
--- a/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
+++ b/src/views/3DOverview/components/LeftContentEquipmentCheck.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="left-content-equipment-check">
-    <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
-    <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
     <div class="el-table-wrapper fix-table">
-      <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
-      <el-table
+      <TechyTable
+        key="table-1"
+        :showIndex="false"
+        :page="1"
+        :limit="8"
+        :table-config="tableProps"
+        :table-data="tableData"
+      ></TechyTable>
+
+      <!-- <el-table
         key="LeftContentEquipmentCheck1"
         border
         :data="tableData"
@@ -14,14 +20,14 @@
         <el-table-column label="所属产线" prop="pl" align="center" />
         <el-table-column label="提示等级" prop="warningLevel" align="center">
           <template slot-scope="scope">
-            <!-- <component :is="PriorityComponent"></component> -->
             <PriorityComponent :injectData="scope.row"></PriorityComponent>
           </template>
         </el-table-column>
         <el-table-column label="巡检内容" prop="checkContent" align="center" />
       </el-table>
-    </div>
-    <!-- <div class="el-table-wrapper">
+    </div> -->
+
+      <!-- <div class="el-table-wrapper">
       <el-table
         key="LeftContentEquipmentCheck2"
         border
@@ -34,12 +40,13 @@
         <el-table-column label="提示等级" prop="checkContent" />
       </el-table>
     </div> -->
+    </div>
   </div>
 </template>
 
 <script>
-// import TechyFakeTable from './TechyFakeTable.vue'
-// import TechyTable from './TechyTable.vue'
+import TechyTable from './TechyTable.vue'
+
 const PriorityComponent = {
   name: 'PriorityComponent',
   props: {
@@ -61,11 +68,16 @@ const PriorityComponent = {
       {
         style: {
           display: 'inline-block',
-          borderRadius: '2px',
-          padding: '2px 6px',
+          // borderRadius: '2px',
+          // padding: '2px 6px',
+          // color: '#fff',
+          // opacity: '0.6',
+          // fontSize: '12px',
+          borderRadius: 'calc(2px * var(--beilv))',
+          padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
           color: '#fff',
           opacity: '0.6',
-          fontSize: '12px',
+          fontSize: 'calc(12px * var(--beilv))',
           lineHeight: 1,
           backgroundColor: this.bgColor
         }
@@ -75,12 +87,12 @@ const PriorityComponent = {
   }
 }
 
-// const tableProps = [
-//   { prop: 'eqName', label: '设备名称', width: 120, resizable: false },
-//   { prop: 'pl', label: '所属产线', width: 120, resizable: false },
-//   { prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
-//   { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
-// ]
+const tableProps = [
+  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 },
+  { prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 },
+  { prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
+  { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
+]
 const tableData = [
   { eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
   { eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
@@ -88,22 +100,16 @@ const tableData = [
   { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
   { eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
   { eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
-  { eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }
-  // { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
-  // { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
+  { eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' },
+  { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
+  { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
 ]
-// const tableData2 = [
-//   { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
-//   { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
-//   { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
-//   { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
-// ]
 
 export default {
   name: 'LeftContentEquipmentCheck',
-  components: { PriorityComponent },
+  components: { TechyTable },
   data() {
-    return { tableData }
+    return { tableProps, tableData }
   },
   created() {},
   mounted() {},
diff --git a/src/views/3DOverview/components/RightContentAlert.vue b/src/views/3DOverview/components/RightContentAlert.vue
index 9f02111..23aea6b 100644
--- a/src/views/3DOverview/components/RightContentAlert.vue
+++ b/src/views/3DOverview/components/RightContentAlert.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="right-content-alert">
     <div class="el-table-wrapper fix-table">
+      <TechyTable
+        key="table-1"
+        :showIndex="false"
+        :page="1"
+        :limit="8"
+        :table-config="tableProps"
+        :table-data="tableData"
+      ></TechyTable>
+      <!--       
       <el-table
         key="RightContentAlertTable"
         border
@@ -23,20 +32,19 @@
         />
         <el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
           <template slot-scope="scope">
-            <!-- <component :is="PriorityComponent"></component> -->
             <PriorityComponent :injectData="scope.row"></PriorityComponent>
           </template>
         </el-table-column>
         <el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
         <el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
-      </el-table>
+      </el-table> -->
     </div>
   </div>
 </template>
 
 <script>
-// import TechyFakeTable from './TechyFakeTable.vue'
-// import TechyTable from './TechyTable.vue'
+import TechyTable from './TechyTable.vue'
+
 const PriorityComponent = {
   name: 'PriorityComponent',
   props: {
@@ -58,11 +66,16 @@ const PriorityComponent = {
       {
         style: {
           display: 'inline-block',
-          borderRadius: '2px',
-          padding: '2px 6px',
+          // borderRadius: '2px',
+          // padding: '2px 6px',
+          // color: '#fff',
+          // opacity: '0.6',
+          // fontSize: '12px',
+          borderRadius: 'calc(2px * var(--beilv))',
+          padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
           color: '#fff',
           opacity: '0.6',
-          fontSize: '12px',
+          fontSize: 'calc(12px * var(--beilv))',
           lineHeight: 1,
           backgroundColor: this.bgColor
         }
@@ -72,6 +85,14 @@ const PriorityComponent = {
   }
 }
 
+const tableProps = [
+  { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
+  { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
+  { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
+  { prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
+  { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
+]
+
 const tableData = [
   { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
   { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
@@ -82,9 +103,9 @@ const tableData = [
 
 export default {
   name: 'RightContentAlert',
-  components: { PriorityComponent },
+  components: { TechyTable },
   data() {
-    return { tableData }
+    return {tableProps, tableData }
   },
   created() {},
   mounted() {},
diff --git a/src/views/3DOverview/components/TechyBox.vue b/src/views/3DOverview/components/TechyBox.vue
index eb3d97c..e970801 100644
--- a/src/views/3DOverview/components/TechyBox.vue
+++ b/src/views/3DOverview/components/TechyBox.vue
@@ -11,11 +11,11 @@ export default {}
 <style scoped>
 .techy-box {
   background: rgba(255, 255, 255, 0.0168);
-  box-shadow: inset 0 0 17px 0 rgba(255, 255, 255, 0.168);
+  box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.168);
   display: inline-block;
   height: 100%;
   width: 100%;
-  border-radius: 4px;
+  border-radius: calc(4px * var(--beilv));
   backdrop-filter: blur(2px);
 }
 </style>
diff --git a/src/views/3DOverview/index.vue b/src/views/3DOverview/index.vue
index e34dd2f..d6ab95e 100644
--- a/src/views/3DOverview/index.vue
+++ b/src/views/3DOverview/index.vue
@@ -301,13 +301,13 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  height: 136px;
-  width: 176px;
+  height: calc(136px * var(--beilv));
+  width: calc(176px * var(--beilv));
 }
 
 .techy-body-part__middle__inner {
   height: 100%;
-  padding: 16px;
+  padding: calc(16px * var(--beilv));
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -316,28 +316,28 @@ export default {
 .techy-body-part__middle__inner p {
   margin: 0;
   padding: 0;
-  font-size: 12px;
+  font-size: calc(12px * var(--beilv));
   line-height: 1.5;
   color: #fff;
 }
 
 .techy-body-part__middle__inner p > span {
   position: relative;
-  padding-left: 16px;
+  padding-left: calc(16px * var(--beilv));
 }
 
 .techy-body-part__middle__inner p > span.round-dot {
-  padding-left: 28px;
+  padding-left: calc(28px * var(--beilv));
 }
 
 .round-dot::before {
   content: '';
   position: absolute;
-  top: 4px;
-  left: 16px;
-  width: 8px;
-  height: 8px;
+  top: calc(4px * var(--beilv));
+  left: calc(16px * var(--beilv));
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
   background-color: rgb(82, 231, 82);
-  border-radius: 4px;
+  border-radius: calc(4px * var(--beilv));
 }
 </style>