update table 的距离问题

src/views/3DOverview/components/LeftContentEquipmentCheck.vue

@@ -2,7 +2,7 @@
   <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">
+    <div class="el-table-wrapper fix-table">
       <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
       <el-table
         key="LeftContentEquipmentCheck1"
@@ -10,10 +10,10 @@
         :data="tableData"
         :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
       >
-        <el-table-column label="设备名称" prop="eqName" />
-        <el-table-column label="所属产线" prop="pl" />
-        <el-table-column label="提示等级" prop="warningLevel" />
-        <el-table-column label="提示等级" prop="checkContent" />
+        <el-table-column label="设备名称" prop="eqName" align="center" />
+        <el-table-column label="所属产线" prop="pl" align="center" />
+        <el-table-column label="提示等级" prop="warningLevel" align="center" />
+        <el-table-column label="提示等级" prop="checkContent" align="center" />
       </el-table>
     </div>
     <!-- <div class="el-table-wrapper">
@@ -73,6 +73,12 @@ export default {
 </script>
 
 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 60% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .left-content-equipment-check {
   height: calc(100% - 32px);
   display: flex;

src/views/3DOverview/components/LeftContentOrder.vue

@@ -2,7 +2,7 @@
   <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">
+    <div class="el-table-wrapper fix-table">
       <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
       <el-table
         key="LeftContentOrder1"
@@ -10,10 +10,22 @@
         :data="tableData"
         :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
       >
-        <el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="规格" prop="specs" :resizable="true" />
-        <el-table-column label="完成度" prop="finished" :resizable="true">
+        <el-table-column
+          label="订单编号"
+          prop="orderCode"
+          :show-overflow-tooltip="true"
+          :resizable="true"
+          align="center"
+        />
+        <el-table-column
+          label="客户名称"
+          prop="clientName"
+          :show-overflow-tooltip="true"
+          :resizable="true"
+          align="center"
+        />
+        <el-table-column label="规格" prop="specs" :resizable="true" align="center" />
+        <el-table-column label="完成度" prop="finished" :resizable="true" align="center">
           <template slot-scope="scope">
             <el-progress
               class="lb-progress-bar"
@@ -79,6 +91,12 @@ export default {
 </script>
 
 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .left-content-equipment-check {
   display: flex;
   gap: calc(100vw / 1920 * 16);
@@ -144,11 +162,11 @@ export default {
 }
 
 .lb-progress-bar {
-  left: 40px;
+  left: 30px;
   display: flex;
 }
 .lb-progress-bar >>> .el-progress__text {
   color: #fff9;
-  left: -70%;
+  left: -75%;
 }
 </style>

src/views/3DOverview/components/RightContentAlert.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="right-content-alert">
-    <div class="el-table-wrapper">
+    <div class="el-table-wrapper fix-table">
       <el-table
         key="RightContentAlertTable"
         border
         :data="tableData"
         :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
       >
-        <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
-        <el-table-column label="故障等级" prop="level" :resizable="true" />
-        <el-table-column label="故障内容" prop="content" :resizable="true" />
-        <el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
+        <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" />
+        <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" />
+        <el-table-column label="故障等级" prop="level" :resizable="true" align="center" />
+        <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>
     </div>
   </div>
@@ -42,6 +42,12 @@ export default {
 </script>
 
 <style scoped>
+.fix-table >>> .el-table td .cell {
+  width: 80% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .right-content-alert {
   height: calc(100% - 32px);
   display: flex;

src/views/3DOverview/index.vue

@@ -19,7 +19,7 @@
 
           <div class="techy-body-part__middle">
             <TechyBox>
-              <div class="flex">
+              <div class="techy-body-part__middle__inner">
                 <p>
                   <b>产线名称 :</b>
                   <span>A产线</span>
@@ -29,7 +29,7 @@
                   <span>清洗机</span>
                 </p>
                 <p>
-                  <b>累计加工数量 :</b>
+                  <b>累计加工 :</b>
                   <span>20</span>
                 </p>
                 <p>
@@ -167,7 +167,7 @@ export default {
 }
 
 #v3d-outter *::-webkit-scrollbar-track {
-  background-color: #14243F;
+  background-color: #14243f;
   /* background-color: white; */
   border-radius: 0;
 }
@@ -244,19 +244,21 @@ export default {
 
 .techy-body-part__middle {
   position: absolute;
-  top: 12%;
-  left: 36%;
-  height: 96px;
-  width: 128px;
+  top: 9%;
+  left: 26%;
+  height: 136px;
+  width: 176px;
 }
 
-.flex {
+.techy-body-part__middle__inner {
+  height: 100%;
   padding: 12px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 }
 
-.flex p {
+.techy-body-part__middle__inner p {
   margin: 0;
   padding: 0;
   font-size: 12px;
@@ -264,15 +266,15 @@ export default {
   color: #fff;
 }
 
-.flex p > span {
+.techy-body-part__middle__inner p > span {
   position: relative;
-  padding-left: 6px;
+  padding-left: 16px;
 }
 .round-dot::before {
   content: '';
   position: absolute;
-  top: 5px;
-  left: -3px;
+  top: 4px;
+  left: 2px;
   width: 8px;
   height: 8px;
   background-color: rgb(82, 231, 82);

src/views/EquipmentManager/HomePage.vue

@@ -8,7 +8,7 @@
           <div class="equipment-exception">
             <!-- 设备报修/异常上报 -->
             <techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
-              <div class="table-wrapper">
+              <div class="table-wrapper fix-table-exception-report">
                 <techy-table
                   :page="1"
                   :limit="7"
@@ -22,7 +22,7 @@
           <div class="equipment-alarm">
             <!-- 设备异常报警 -->
             <techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
-              <div class="table-wrapper">
+              <div class="table-wrapper fix-table-eq-exception">
                 <techy-table
                   :page="1"
                   :limit="7"
@@ -325,6 +325,17 @@ export default {
 </script>
 
 <style scoped>
+.fix-table-eq-exception >>> .el-table td .cell {
+  width: 80% !important;
+  margin: auto;
+  text-align: left;
+}
+.fix-table-exception-report >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
 .visual-container {
   width: 100%;
   min-width: 1280px;

src/views/EquipmentManager/mockData.js

@@ -27,18 +27,18 @@ const PriorityComponent = {
     }
   },
   methods: {},
-  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)
+  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)
   }
 }
 
 export const equipmentExceptionProps = [
-  { label: '设备名称', prop: 'eqName' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '报修/异常内容', prop: 'content' },
-  { label: '报修/发现人', prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { 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 }
 ]
 
 export const equipmentExceptionDatalist = [
@@ -70,21 +70,21 @@ 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)
   }
 }
 
 export const equipmentAlarmProps = [
-  { label: '设备名称', prop: 'eqName' },
-  { label: '设备编码', prop: 'eqCode' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
-  { label: '报警内容', prop: 'content' }
+  { label: '设备名称', prop: 'eqName', align: 'center' },
+  { label: '设备编码', prop: 'eqCode', align: 'center' },
+  { label: '所属产线', prop: 'pl', align: 'center' },
+  { label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
+  { label: '报警内容', prop: 'content', align: 'center' }
 ]
 
 export const equipmentAlarmDatalist = [
@@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
 ]
 
 export const sparepartsProps = [
-  { prop: 'name', label: '部件名称' },
-  { prop: 'eq', label: '所属设备' },
-  { prop: 'pl', label: '所属产线' },
-  { prop: 'update_time', label: '更换时间' },
-  { prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
-  { prop: 'stock', label: '备件库存量' },
-  { prop: 'location', label: '库位' }
+  { prop: 'name', label: '部件名称', align: 'center' },
+  { prop: 'eq', label: '所属设备', align: 'center' },
+  { prop: 'pl', label: '所属产线', align: 'center' },
+  { prop: 'update_time', label: '更换时间', align: 'center' },
+  { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
+  { prop: 'stock', label: '备件库存量', align: 'center' },
+  { prop: 'location', label: '库位', align: 'center' }
 ]
 
 export const sparepartsDatalist = [
@@ -172,9 +172,9 @@ const StatusComponent = {
       ][this.injectData.status - 1]
     }
   },
-  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' }}, ''),
+  render: function (h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+      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/HomePage.vue

@@ -5,7 +5,7 @@
       <div class="part-1">
         <div>
           <techy-container :title="'质量异常上报'" :icon="qualitySVG">
-            <div>
+            <div class="fix-table-exception-report">
               <techy-table
                 :page="1"
                 :limit="10"
@@ -17,7 +17,7 @@
           </techy-container>
         </div>
 
-        <div>
+        <div class="fix-table-exception-alert">
           <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
             <techy-table
               :page="1"
@@ -337,6 +337,19 @@ export default {
 </script>
 
 <style scoped>
+.fix-table-exception-alert >>> .el-table td .cell {
+  width: 75% !important;
+  margin: auto;
+  text-align: left;
+}
+.fix-table-exception-report >>> .el-table td .cell {
+  width: 70% !important;
+  margin: auto;
+  text-align: left;
+}
+
+
+
 .visual-container {
   width: 100%;
   min-width: 1280px;

src/views/QualityManager/components/charts/newLineStack.vue

@@ -101,7 +101,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#FB418C' // 0% 处的颜色
+                    color: '#FB418C66' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -132,7 +132,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#DDB112' // 0% 处的颜色
+                    color: '#DDB11266' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -163,7 +163,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#1A99FF' // 0% 处的颜色
+                    color: '#1A99FF66' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -194,7 +194,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#A691FF' // 0% 处的颜色
+                    color: '#A691FF66' // 0% 处的颜色
                   },
                   {
                     offset: 1,
@@ -229,7 +229,7 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#49FBD6' // 0% 处的颜色
+                    color: '#49FBD666' // 0% 处的颜色
                   },
                   {
                     offset: 1,

src/views/QualityManager/mockData.js

@@ -30,20 +30,20 @@ const PriorityComponent = {
     console.log(this.injectData.priority)
   },
   methods: {},
-  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)
+  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)
   }
 }
 
 console.log('is component?', PriorityComponent)
 
 export const qualityTableProps = [
-  { label: '工序名称', width: 80, prop: 'wsName' },
-  { label: '所属产线', width: 80, prop: 'pl' },
+  { label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
+  { label: '所属产线', width: 130, prop: 'pl', align: 'center' },
   { label: '异常内容', align: 'center', prop: 'content' },
-  { label: '报告人', width: 80, prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
+  { label: '报告人', width: 120, prop: 'creator', align: 'center' },
+  { label: '时间', prop: 'time', align: 'center' },
+  { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
 ]
 
 export const qualityDatalist = [
@@ -87,23 +87,23 @@ const StatusComponent = {
       ][this.injectData.status - 1]
     }
   },
-  render: function(h) {
-    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [
-      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''),
+  render: function (h) {
+    return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
+      h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''),
       h('span', this.statusText)
     ])
   }
 }
 
 export const qualityExceptionTableProps = [
-  { label: '工序名称', prop: 'wsName' },
-  { label: '所属产线', prop: 'pl' },
-  { label: '异常内容', prop: 'content' },
-  { label: '发现人', prop: 'creator' },
-  { label: '时间', prop: 'time' },
-  { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
-  { label: '处理人', prop: 'charger' },
-  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
+  { label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
+  { label: '所属产线', prop: 'pl', align: 'center', width: 120 },
+  { 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: 100 },
+  { label: '处理人', prop: 'charger', align: 'center', width: 100 },
+  { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
 ]
 
 export const qualityExceptionDatalist = [