【BUG】报表导出图片样式错乱问题

src/components/chartDesigner/charts/indicatorView.less

@@ -33,7 +33,6 @@
                     }
                     &.c-key {
                         font-size: 12px;
-                        color: #999;
                     }
                     &.c-value {
                         font-size: 28px;
@@ -51,7 +50,6 @@
                                 font-size: 12px;
                                 &.til {
                                     white-space: nowrap;
-                                    color: #999;
                                     overflow: hidden;
                                     text-overflow: ellipsis;
                                 }

src/components/chartDesigner/charts/tableView.less

@@ -10,6 +10,13 @@
             }
             .ant-pagination {
                 margin: 8px 0;
+                >.ant-pagination-item {
+                    &-active {
+                        >a {
+                            position: absolute;
+                        }
+                    }
+                }
             }
         }
     }

src/components/chartDesigner/sections/style/theme/theme2.less

@@ -19,6 +19,7 @@
     .ant-table {
         border: none;
         .ant-table-header {
+            background: #3054AF;
             &:after {
                 background: #3054AF;
             }
@@ -87,6 +88,7 @@
                 border-color: transparent;
                 >a {
                     color: #333333;
+                    position: absolute;
                 }
             }
         }

src/models/dashboardDesigner.js

@@ -793,7 +793,8 @@ export default {
             let reactGridLayout = viewcontent.children[0];
             let itemEls = reactGridLayout.children;
             let classList = reactGridLayout.children[0].classList; // 元素样式列表
-            let classListBackup = []; // 样式备份
+            let classListBackup = []; // 样式名备份
+            let tableStyles = []; // 表格样式备份
 
             /*
              * 1.因为部分样式(transition)在html2canvas的表达器中会出现渲染问题，所以需要在截图前将样式暂时移除
@@ -809,6 +810,36 @@ export default {
                     itemEls[i].querySelector('.chart-title .tools').style.display = 'none';
                     itemEls[i].querySelector('.chart-tools').style.display = 'none';
                 });
+                let tableEl = itemEls[i].querySelector('.table-view');
+                if(tableEl) {
+                    tableEl.querySelector('.ant-table-header').style.marginRight = '0';
+                    let svgs = tableEl.querySelectorAll('svg');
+                    for(let x = 0; x < svgs.length; x++) {
+                        svgs[x].setAttribute('width', '12px');
+                        svgs[x].setAttribute('height', '12px');
+                        svgs[x].setAttribute('fill', '#ccc');
+                    }
+
+                    let tableStyle = {
+                        index: i
+                    };
+                    tableEl.querySelector('.ant-table-body').getAttribute('style').split(';').forEach(x => {
+                        if(x) {
+                            let arr = x.split(':');
+                            tableStyle[arr[0]] = arr[1];
+                        }
+                    });
+                    let str = '';
+                    for(let k in tableStyle) {
+                        if(k === 'overflow') {
+                            str += k + ':hidden !important;';
+                        }else {
+                            str += k + ':' + tableStyle[k] + ';';
+                        }
+                    }
+                    tableEl.querySelector('.ant-table-body').setAttribute('style', str);
+                    tableStyles.push(tableStyle);
+                }
             }
 
             try {
@@ -836,6 +867,28 @@ export default {
                         itemEls[i].querySelector('.chart-title .tools').style.display = '';
                         itemEls[i].querySelector('.chart-tools').style.display = '';
                     });
+                    let tableEl = itemEls[i].querySelector('.table-view');
+                    if(tableEl) {
+                        tableEl.querySelector('.ant-table-header').style.marginRight = '';
+                        let svgs = tableEl.querySelectorAll('svg');
+                        for(let x = 0; x < svgs.length; x++) {
+                            svgs[x].setAttribute('width', '1em');
+                            svgs[x].setAttribute('height', '1em');
+                            svgs[x].setAttribute('fill', 'currentColor');
+                        }
+
+                        for(let j=tableStyles.length-1;j>=0;j--) {
+                            let tableStyle = tableStyles[j];
+                            if(tableStyle.index === i) {
+                                delete tableStyle.index;
+                                let str = '';
+                                for(let k in tableStyle) {
+                                    str += k + ':' + tableStyle[k] + ';';
+                                }
+                                tableEl.querySelector('.ant-table-body').setAttribute('style', str);
+                            }
+                        }
+                    }
                 }
                 yield put({ type: 'setField', name: 'loading', value: false });
             }
@@ -845,6 +898,7 @@ export default {
             const { itemEl, item } = action;
             const { name } = item;
             let classListBackup = [];
+            let tableStyle = {};
 
             let classList = itemEl.classList;
             for(let i = 0; i < classList.length; i++) {
@@ -856,6 +910,32 @@ export default {
             });
             itemEl.querySelector('.chart-title .tools').style.display = 'none';
             itemEl.querySelector('.chart-tools').style.display = 'none';
+
+            let tableEl = itemEl.querySelector('.table-view');
+            if(tableEl) {
+                tableEl.querySelector('.ant-table-header').style.marginRight = '0';
+                let svgs = tableEl.querySelectorAll('svg');
+                for(let x = 0; x < svgs.length; x++) {
+                    svgs[x].setAttribute('width', '12px');
+                    svgs[x].setAttribute('height', '12px');
+                    svgs[x].setAttribute('fill', '#ccc');
+                }
+                tableEl.querySelector('.ant-table-body').getAttribute('style').split(';').forEach(x => {
+                    if(x) {
+                        let arr = x.split(':');
+                        tableStyle[arr[0]] = arr[1];
+                    }
+                });
+                let str = '';
+                for(let k in tableStyle) {
+                    if(k === 'overflow') {
+                        str += k + ':hidden !important;';
+                    }else {
+                        str += k + ':' + tableStyle[k] + ';';
+                    }
+                }
+                tableEl.querySelector('.ant-table-body').setAttribute('style', str);
+            }
             
             try {
                 yield put({ type: 'setField', name: 'loading', value: false });
@@ -881,6 +961,21 @@ export default {
                 });
                 itemEl.querySelector('.chart-title .tools').style.display = '';
                 itemEl.querySelector('.chart-tools').style.display = '';
+                let tableEl = itemEl.querySelector('.table-view');
+                if(tableEl) {
+                    tableEl.querySelector('.ant-table-header').style.marginRight = '';
+                    let svgs = tableEl.querySelectorAll('svg');
+                    for(let x = 0; x < svgs.length; x++) {
+                        svgs[x].setAttribute('width', '1em');
+                        svgs[x].setAttribute('height', '1em');
+                        svgs[x].setAttribute('fill', 'currentColor');
+                    }
+                    let str = '';
+                    for(let k in tableStyle) {
+                        str += k + ':' + tableStyle[k] + ';';
+                    }
+                    tableEl.querySelector('.ant-table-body').setAttribute('style', str);
+                }
                 yield put({ type: 'setField', name: 'loading', value: false });
             }
         }