update 3d 的表格

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() {},