update techytable滚动条

src/views/3DOverview/index.vue

@@ -163,7 +163,7 @@ export default {
 }
 
 #v3d-outter *::-webkit-scrollbar {
-  width: 8px;
+  width: calc(8px * var(--beilv));
 }
 
 #v3d-outter *::-webkit-scrollbar-track {
@@ -173,14 +173,14 @@ export default {
 }
 
 #v3d-outter *::-webkit-scrollbar-button {
-  width: 8px;
-  height: 8px;
+  width: calc(8px * var(--beilv));
+  height: calc(8px * var(--beilv));
   background: #5bc4bf9f;
   position: relative;
 }
 
 #v3d-outter *::-webkit-scrollbar-thumb {
-  border-radius: 8px;
+  border-radius: calc(8px * var(--beilv));
   background: #5bc4bf9f;
 }
 

src/views/EquipmentManager/HomePage.vue

@@ -288,7 +288,7 @@ export default {
 
 .table-wrapper {
   height: calc(100% - 3vh);
-  overflow: scroll;
+  overflow: auto;
 }
 
 .grid {

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>
+    <el-table class="techy-el-table" v-loading="isLoading" :data="renderData" border height="100%">
       <el-table-column
         v-if="page && limit && showIndex"
         prop="_pageIndex"
@@ -116,11 +116,40 @@ export default {
 </script>
 
 <style scoped>
-.visual-base-table-container,
-.visual-base-table-container >>> .el-table {
-  min-width: 100%;
+.visual-base-table-container >>> ::-webkit-scrollbar {
+  width: calc(8px * var(--beilv));
 }
+
+.visual-base-table-container >>> ::-webkit-scrollbar-track {
+  background-color: #14243f;
+  border-radius: 0;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-button {
+  width: calc(8px * var(--beilv));;
+  height: calc(8px * var(--beilv));;
+  background: #5bc4bf9f;
+  position: relative;
+}
+
+.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
+  border-radius: calc(8px * var(--beilv));;
+  background: #5bc4bf9f;
+}
+
+/* .visual-base-table-container {
+  min-width: 30vw;
+} */
+.visual-base-table-container {
+  height: 100%;
+}
+/* .visual-base-table-container >>> .el-table {
+  min-width: 120%;
+} */
 /* 清除默认样式 */
+.visual-base-table-container >>> th.gutter {
+  display: none;
+}
 .visual-base-table-container >>> table {
   background: transparent;
 }

src/views/EquipmentManager/mockData.js

@@ -33,12 +33,12 @@ const PriorityComponent = {
 }
 
 export const equipmentExceptionProps = [
-  { label: '设备名称', prop: 'eqName', align: 'center' },
-  { label: '所属产线', prop: 'pl', align: 'center', width: 80 },
-  { label: '报修/异常内容', prop: 'content', align: 'center' },
-  { label: '报修/发现人', prop: 'creator', align: 'center', width: 100 },
-  { label: '时间', prop: 'time', align: 'center' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 }
+  { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 60 },
+  { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 60 },
+  { 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 },
 ]
 
 export const equipmentExceptionDatalist = [
@@ -80,10 +80,10 @@ const LifeRemainComponent = {
 }
 
 export const equipmentAlarmProps = [
-  { label: '设备名称', prop: 'eqName', align: 'center' },
-  { label: '设备编码', prop: 'eqCode', align: 'center' },
+  { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 },
+  { label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 },
   { label: '所属产线', prop: 'pl', align: 'center' },
-  { label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
+  { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 },
   { label: '报警内容', prop: 'content', align: 'center' }
 ]