feat: 样式抽离，分页表格样式优化

apps/bigmember_pc/src/assets/style/page/pdf-base.scss

@@ -0,0 +1,126 @@
+.page-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: green;
+  opacity: 0.5;
+  z-index: -1;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  min-width: unset !important;
+  background: rgb(204, 204, 204);
+}
+
+.doc-container {
+  position: relative;
+}
+
+.doc-head img {
+  height: 30px;
+}
+
+.fixed-page-inset {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  width: 100%;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.doc-head {
+  position: relative;
+  width: 830px;
+  height: 130px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: #c0c0c0;
+  background: white;
+}
+
+.doc-footer {
+  .doc-footer-container {
+    width: 830px;
+    height: 60px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  position: relative;
+  height: 60px;
+  line-height: 60px;
+  color: #c0c0c0;
+  text-align: center;
+  width: 830px;
+  background: white;
+}
+
+.doc-head::after,
+.doc-head::before,
+.doc-footer::after,
+.doc-footer::before {
+  top: 50px;
+  position: absolute;
+  content: '';
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  border: 1px solid #eee;
+  border-width: 0 1px 1px 0;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.doc-head::after {
+  border-width: 0 0 1px 1px;
+  right: -30px;
+}
+
+.doc-head::before {
+  left: -30px;
+}
+
+.doc-footer::before {
+  top: 15px;
+  left: -30px;
+  border-width: 1px 1px 0 0;
+
+}
+
+.doc-footer::after {
+  top: 15px;
+  right: -30px;
+  border-width: 1px 0 0 1px;
+}
+
+.page[size='A4'].static-page {
+  height: 1360px;
+
+  .static-page--main {
+    height: 1150px;
+  }
+}
+
+.inset-fill-height-box.inset-is-table {
+  background: #fff;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.inset-is-table--fix {
+  position: absolute;
+  background: #fff;
+  z-index: 2;
+}

apps/bigmember_pc/src/assets/style/page/pdf.scss

@@ -340,12 +340,13 @@ p {
       thead.is-group th.el-table__cell,
       th {
         background: #d2e7f7;
+        padding: 8px 0;
       }
     }
   }
 
   .chart-tips {
-    font-size: 14px !important;
+    font-size: 12px !important;
     color: #999 !important;
   }
   .tip-red-container {
@@ -399,4 +400,3 @@ p {
 
 }
 
-

apps/bigmember_pc/src/views/analysisReport/components/MarketSegment.vue

@@ -84,6 +84,10 @@ export default {
           ]
         }
       }
+    },
+    dataZoom: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -114,8 +118,8 @@ export default {
         // 设置时间轴
         Object.assign(options, {
           dataZoom: {
-            show: true, // 显示滚动条
-            realtime: true, // 拖动时，是否实时更新系列的视图
+            show: this.dataZoom, // 显示滚动条
+            realtime: this.dataZoom, // 拖动时，是否实时更新系列的视图
             type: 'slider',
             height: 20,
             bottom: 0

apps/bigmember_pc/src/views/analysisReport/components/MarketTimeScatter.vue

@@ -37,6 +37,10 @@ export default {
     barChartColor: {
       type: String,
       default: '#05A6F3'
+    },
+    dataZoom: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -70,8 +74,8 @@ export default {
             right: '13%'
           },
           dataZoom: {
-            show: true, // 显示滚动条
-            realtime: true, // 拖动时，是否实时更新系列的视图
+            show: this.dataZoom, // 显示滚动条
+            realtime: this.dataZoom, // 拖动时，是否实时更新系列的视图
             type: 'slider',
             height: 20,
             bottom: 0,

apps/bigmember_pc/src/views/download-pdf/entReport.vue

@@ -1296,108 +1296,7 @@ export default {
 </script>
 
 <style lang="scss">
-.page-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: green;
-  opacity: 0.5;
-  z-index: -1;
-}
-body {
-  position: relative;
-  margin: 0;
-  min-width: unset !important;
-  background: rgb(204, 204, 204);
-}
-
-.doc-container {
-  position: relative;
-}
-.doc-head img {
-  height: 30px;
-}
-.fixed-page-inset {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 100%;
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.doc-head {
-  position: relative;
-  width: 830px;
-  height: 130px;
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  color: #c0c0c0;
-  background: white;
-}
-.doc-footer {
-  .doc-footer-container {
-    width: 830px;
-    height: 60px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-  position: relative;
-  height: 60px;
-  line-height: 60px;
-  color: #c0c0c0;
-  text-align: center;
-  width: 830px;
-  background: white;
-}
-.doc-head::after,
-.doc-head::before,
-.doc-footer::after,
-.doc-footer::before {
-  top:50px;
-  position:absolute;
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  border: 1px solid #eee;
-  border-width: 0 1px 1px 0;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-.doc-head::after {
-  border-width: 0 0 1px 1px;
-  right:-30px;
-}
-.doc-head::before {
-  left:-30px;
-}
-.doc-footer::before {
-  top:15px;
-  left:-30px;
-  border-width: 1px 1px 0 0;
-
-}
-.doc-footer::after {
-  top:15px;
-  right: -30px;
-  border-width: 1px 0 0 1px;
-}
-.page[size='A4'].static-page {
-  height: 1360px;
-  .static-page--main {
-    height: 1150px;
-  }
-}
+@import '~@/assets/style/page/pdf-base.scss';
 </style>
 <style lang="scss" scoped>
 @import '~@/assets/style/page/pdf.scss';

apps/bigmember_pc/src/views/download-pdf/marketReport.vue

@@ -174,6 +174,7 @@
             <h5>（1）年度分布</h5>
 
             <MarketTimeScatter
+              :data-zoom="false"
               width="460px"
               :chartData="sections.timeScatter.year.count"
             />
@@ -181,6 +182,7 @@
 
             <h5>（2）月度分布</h5>
             <MarketTimeScatter
+              :data-zoom="false"
               width="460px"
               :chartData="sections.timeScatter.month.count"
             />
@@ -200,6 +202,7 @@
             <h5>（1）年度分布</h5>
 
             <MarketTimeScatter
+              :data-zoom="false"
               width="460px"
               :chartData="sections.timeScatter.year.amount"
             />
@@ -207,6 +210,7 @@
 
             <h5>（2）月度分布</h5>
             <MarketTimeScatter
+              :data-zoom="false"
               width="460px"
               :chartData="sections.timeScatter.month.amount"
             />
@@ -366,6 +370,7 @@
         <div class="sub-section-content">
           <MarketSegment
             v-if="sections.market.refine.dataAlready"
+            :data-zoom="false"
             :projectCountData="sections.market.refine.projectCountData"
             :projectAmountData="{ rows: [] }"
           />
@@ -2029,108 +2034,7 @@ export default {
 </script>
 
 <style lang="scss">
-.page-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: green;
-  opacity: 0.5;
-  z-index: -1;
-}
-body {
-  position: relative;
-  margin: 0;
-  min-width: unset !important;
-  background: rgb(204, 204, 204);
-}
-
-.doc-container {
-  position: relative;
-}
-.doc-head img {
-  height: 30px;
-}
-.fixed-page-inset {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 100%;
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.doc-head {
-  position: relative;
-  width: 830px;
-  height: 130px;
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  color: #c0c0c0;
-  background: white;
-}
-.doc-footer {
-  .doc-footer-container {
-    width: 830px;
-    height: 60px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-  position: relative;
-  height: 60px;
-  line-height: 60px;
-  color: #c0c0c0;
-  text-align: center;
-  width: 830px;
-  background: white;
-}
-.doc-head::after,
-.doc-head::before,
-.doc-footer::after,
-.doc-footer::before {
-  top:50px;
-  position:absolute;
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  border: 1px solid #eee;
-  border-width: 0 1px 1px 0;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-.doc-head::after {
-  border-width: 0 0 1px 1px;
-  right:-30px;
-}
-.doc-head::before {
-  left:-30px;
-}
-.doc-footer::before {
-  top:15px;
-  left:-30px;
-  border-width: 1px 1px 0 0;
-
-}
-.doc-footer::after {
-  top:15px;
-  right: -30px;
-  border-width: 1px 0 0 1px;
-}
-.page[size='A4'].static-page {
-  height: 1360px;
-  .static-page--main {
-    height: 1150px;
-  }
-}
+@import '~@/assets/style/page/pdf-base.scss';
 </style>
 <style lang="scss" scoped>
 @import '~@/assets/style/page/pdf.scss';
@@ -2160,6 +2064,9 @@ body {
       display: none;
     }
   }
+  .el-link.el-link--default.is-disabled {
+    color: #606266;
+  }
 }
 .no-data-tip{
   text-align: center;

apps/bigmember_pc/src/views/download-pdf/propReport.vue

@@ -1827,108 +1827,7 @@ export default {
 
 
 <style lang="scss">
-.page-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background: green;
-  opacity: 0.5;
-  z-index: -1;
-}
-body {
-  position: relative;
-  margin: 0;
-  min-width: unset !important;
-  background: rgb(204, 204, 204);
-}
-
-.doc-container {
-  position: relative;
-}
-.doc-head img {
-  height: 30px;
-}
-.fixed-page-inset {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 100%;
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.doc-head {
-  position: relative;
-  width: 830px;
-  height: 130px;
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  color: #c0c0c0;
-  background: white;
-}
-.doc-footer {
-  .doc-footer-container {
-    width: 830px;
-    height: 60px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-  position: relative;
-  height: 60px;
-  line-height: 60px;
-  color: #c0c0c0;
-  text-align: center;
-  width: 830px;
-  background: white;
-}
-.doc-head::after,
-.doc-head::before,
-.doc-footer::after,
-.doc-footer::before {
-  top:50px;
-  position:absolute;
-  content: '';
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  border: 1px solid #eee;
-  border-width: 0 1px 1px 0;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-.doc-head::after {
-  border-width: 0 0 1px 1px;
-  right:-30px;
-}
-.doc-head::before {
-  left:-30px;
-}
-.doc-footer::before {
-  top:15px;
-  left:-30px;
-  border-width: 1px 1px 0 0;
-
-}
-.doc-footer::after {
-  top:15px;
-  right: -30px;
-  border-width: 1px 0 0 1px;
-}
-.page[size='A4'].static-page {
-  height: 1360px;
-  .static-page--main {
-    height: 1150px;
-  }
-}
+@import '~@/assets/style/page/pdf-base.scss';
 </style>
 <style lang="scss" scoped>
 @import '~@/assets/style/page/pdf.scss';

apps/bigmember_pc/src/views/download-pdf/utils/index.js

@@ -104,7 +104,10 @@ class ComputedPageEdge {
     return $current
   }
 
-  getInsetDom (moveHeight) {
+  getInsetDom (moveHeight, type = '', dom = null) {
+    if (type === 'table') {
+      return `<div class="inset-fill-height-box inset-is-table" style="width: ${$(dom).width()}px;height: ${moveHeight}px;"></div>`
+    }
     return `<div class="inset-fill-height-box" style="height: ${moveHeight}px"></div>`
   }
 
@@ -152,9 +155,9 @@ class ComputedPageEdge {
               console.log(tagName, '修正后的合并单元格首个节点', fixMergeCellDom, fixMoveHeight, result.moveHeight, diffMoveHeight);
             }
 
-            $(fixMergeCellDom).before(this.getInsetDom(fixMoveHeight))
+            $(fixMergeCellDom).before(this.getInsetDom(fixMoveHeight, 'table', fixMergeCellDom))
           } else {
-            $(nowDom).before(this.getInsetDom(result.moveHeight))
+            $(nowDom).before(this.getInsetDom(result.moveHeight, 'table', nowDom))
           }
         } else {
           $(nowDom).before(this.getInsetDom(result.moveHeight))
@@ -222,6 +225,9 @@ class ComputedPageEdge {
     }
     // 目录
     const catalogueHtml =  this.createCatalogue()
+
+    this.fixTableStyle()
+
     this.callback({
       pageNum,
       catalogueHtml
@@ -269,6 +275,17 @@ class ComputedPageEdge {
     }
     return num
   }
+
+  fixTableStyle () {
+    $(".inset-fill-height-box.inset-is-table").each(function () {
+      try {
+        const c = $(this)[0].getBoundingClientRect()
+        $(document.body).append(`<div class="inset-is-table--fix" style="top: ${c.top}px;left: ${c.left - 2}px;width: ${c.width + 4}px;height: ${c.height - 1}px;"></div>`)
+      } catch (e) {
+        console.warn(e);
+      }
+    })
+  }
 }
 
 export default ComputedPageEdge