Ver código fonte

联锁名称过长的,加省略号

dongjh 7 meses atrás
pai
commit
aafd6af5ec

+ 41 - 9
src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -213,22 +213,38 @@
           // },
           {
             title:'联锁名称',
-            align:"center",
-            // width: 100,
+            // align:"center",
             dataIndex: 'interlockname',
+            // ellipsis: true,
             customRender:(text,record,index)=> {
               var children = (
-                <a-tooltip>
-                  <template slot="title">
-                    { record.interlockApparatusName } -- { record.interlockSystemName }
-                  </template>
-                  { record.interlockname }
-                </a-tooltip>
+                <div class="item-node-container">
+                  <div class="item-node-title">
+                    <span class="item-node-name">
+                      <a-tooltip>
+                        <template slot="title">
+                          { record.interlockApparatusName } -- { record.interlockSystemName } -- {record.interlockname}
+                        </template>
+                        <span>
+                          {record.interlockname}
+                        </span>
+                      </a-tooltip>
+                    </span>
+                  </div>
+                </div>
+                // <a-tooltip>
+                //   <template slot="title">
+                //     { record.interlockApparatusName } -- { record.interlockSystemName }
+                //   </template>
+                //   { record.interlockname }
+                // </a-tooltip>
               )
-              return {
+              const obj = {
                 children: [children],
                 attrs: {rowSpan:record.rowSpan}
               }
+               obj.attrs.align = 'left';
+               return obj;
             },
             customCell: (record, index)=>{ return this.customCellDetail(record, index)}
             // sorter: (a, b) => a.interlockname - b.interlockname,
@@ -757,4 +773,20 @@
   // .ant-table-body {
   //   overflow-x: auto;
   // }
+  
+  .item-node-title {
+    width: 300px;
+  }
+  .item-node-name{
+    padding-left: 8px;
+    width: 95%;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden; /*超出的文本隐藏*/
+    text-overflow: ellipsis; /* 溢出用省略号*/
+    vertical-align: top; //设置基准线,解决display inline-block造成的错位问题
+  }
+  /deep/.ant-table-thead > tr > th {
+    text-align: center; 
+  }
 </style>

+ 35 - 8
src/views/module_interLock/interlockHistoryData/InterlockHistoryList.vue

@@ -219,24 +219,34 @@
           },
           {
             title:'联锁名称',
-            align:"center",
+            // align:"left",
             dataIndex: 'interlockname',
             // customRender:(t,record,index)=> {
             //   return {children: record.interlockname,attrs: {rowSpan:record.rowSpan4}};
             // },
             customRender:(text,record,index)=> {
               var children = (
-                <a-tooltip>
-                  <template slot="title">
-                    { record.interlockApparatusName } -- { record.interlockSystemName }
-                  </template>
-                  { record.interlockname }
-                </a-tooltip>
+                <div class="item-node-container">
+                  <div class="item-node-title">
+                    <span class="item-node-name">
+                      <a-tooltip>
+                        <template slot="title">
+                          { record.interlockApparatusName } -- { record.interlockSystemName } -- {record.interlockname}
+                        </template>
+                        <span>
+                          {record.interlockname}
+                        </span>
+                      </a-tooltip>
+                    </span>
+                  </div>
+                </div>
               )
-              return {
+              const obj = {
                 children: [children],
                 attrs: {rowSpan:record.rowSpan}
               }
+               obj.attrs.align = 'left';
+               return obj;
             },
             customCell: (record, index)=>{ return this.customCellDetail(record, index)}
           },
@@ -697,5 +707,22 @@
   @import '~@assets/less/common.less';
   .table-operator {
     width: 10% !important;
+  }  
+</style>
+<style lang="less" scoped>
+  .item-node-title {
+    width: 300px;
+  }
+  .item-node-name{
+    padding-left: 8px;
+    width: 90%;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden; /*超出的文本隐藏*/
+    text-overflow: ellipsis; /* 溢出用省略号*/
+    vertical-align: top; //设置基准线,解决display inline-block造成的错位问题
+  }
+  /deep/.ant-table-thead > tr > th {
+    text-align: center; 
   }
 </style>

+ 34 - 1
src/views/module_interLock/interlockHistoryDetail/InterlockHistoryDetailList.vue

@@ -246,7 +246,26 @@
             align:"center",
             dataIndex: 'interlockname',
             customRender:function (t,r,index) {
-              return {children: t,attrs: {rowSpan:r.rowSpan}};
+              var children = (
+                <div class="item-node-container">
+                  <div class="item-node-title">
+                    <span class="item-node-name">
+                      <a-tooltip>
+                        <template slot="title">
+                          { r.interlockApparatusName } -- { r.interlockSystemName } -- {r.interlockname}
+                        </template>
+                        <span>
+                          {r.interlockname}
+                        </span>
+                      </a-tooltip>
+                    </span>
+                  </div>
+                </div>
+              )
+              return {
+                children: [children],
+                attrs: {rowSpan:r.rowSpan}
+              };
             },
           },
           // {
@@ -560,4 +579,18 @@
 </script>
 <style scoped>
   @import '~@assets/less/common.less';
+</style>
+<style lang="less" scoped>
+  .item-node-title {
+    width: 90%;
+  }
+  .item-node-name{
+    padding-left: 8px;
+    width: 90%;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden; /*超出的文本隐藏*/
+    text-overflow: ellipsis; /* 溢出用省略号*/
+    vertical-align: top; //设置基准线,解决display inline-block造成的错位问题
+  }
 </style>

+ 36 - 3
src/views/module_interLock/interlockSummaryDetail/InterlockSummaryDetailList.vue

@@ -267,7 +267,26 @@
             align:"center",
             dataIndex: 'interlockname',
             customRender:function (t,r,index) {
-              return {children: t,attrs: {rowSpan:r.rowSpan}};
+              var children = (
+                <div class="item-node-container">
+                  <div class="item-node-title">
+                    <span class="item-node-name">
+                      <a-tooltip>
+                        <template slot="title">
+                          { r.interlockApparatusName } -- { r.interlockSystemName } -- {r.interlockname}
+                        </template>
+                        <span>
+                          {r.interlockname}
+                        </span>
+                      </a-tooltip>
+                    </span>
+                  </div>
+                </div>
+              )
+              return {
+                children: [children],
+                attrs: {rowSpan:r.rowSpan}
+              };
             },
           },
           // {
@@ -289,7 +308,7 @@
                     { record.interlockConditionTag }
                   </template>
                   { text }
-                  <span class="normal-tag">
+                  <span class="primary-tag">
                     { record.interlockSetUnit ? record.interlockSetUnit : '' }
                   </span>
                 </a-tooltip>
@@ -319,7 +338,7 @@
               var children = (
                 <a-tooltip>
                   { t }
-                  <span class="normal-tag">
+                  <span class="primary-tag">
                     { r.interlockSetUnit ? r.interlockSetUnit : '' }
                   </span>
                 </a-tooltip>
@@ -595,4 +614,18 @@
 </script>
 <style scoped>
   @import '~@assets/less/common.less';
+</style>
+<style lang="less" scoped>
+  .item-node-title {
+    width: 90%;
+  }
+  .item-node-name{
+    padding-left: 8px;
+    width: 90%;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden; /*超出的文本隐藏*/
+    text-overflow: ellipsis; /* 溢出用省略号*/
+    vertical-align: top; //设置基准线,解决display inline-block造成的错位问题
+  }
 </style>