From 6fd326949f0d93a908384f45f76d7c44ac28b4f3 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 8 Apr 2022 13:48:49 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1788=20fix=EF=BC=9A=20panel=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=95=B4=E9=A1=B5=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartTable.vue    |  1 +
 nezha-fronted/src/components/chart/chartList.vue |  1 +
 .../src/components/common/js/htmlToPdf.js        |  4 ++--
 .../components/common/mixin/htmlToPdfMixin.js    | 12 +++++++++++-
 .../src/components/page/dashboard/panel.vue      | 16 +++++++++-------
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index 461dc7f9b..39a12a1d9 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -168,6 +168,7 @@ export default {
           obj[column.title + 'mapping'] = ''
           if (this.chartInfo.param.enable && this.chartInfo.param.enable.valueMapping) {
             valueMapping[column.title].forEach(item => {
+              // const rowValue = row.display[column.title + 'display']
               const rowValue = row.display[column.title + 'display']
               if (item.type === 'value') {
                 if (rowValue == item.value) {
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index d4873ab9e..94ed9f159 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -3,6 +3,7 @@
     <grid-layout
       ref="layout"
       v-if="gridLayoutShow"
+      class="pdfDom"
       :class="firstInit ? 'no-animation' : ''"
       :col-num="12"
       :is-draggable="!panelLock"
diff --git a/nezha-fronted/src/components/common/js/htmlToPdf.js b/nezha-fronted/src/components/common/js/htmlToPdf.js
index 639a6c56b..2ee451703 100644
--- a/nezha-fronted/src/components/common/js/htmlToPdf.js
+++ b/nezha-fronted/src/components/common/js/htmlToPdf.js
@@ -16,7 +16,7 @@ export default {
         // height: 240, //canvas高度
         x: x || 0, // x坐标 需要计算
         y: y || 0, // y坐标 需要计算
-        async: true, // 是否异步解析和呈现元素
+        async: false, // 是否异步解析和呈现元素
         foreignObjectRendering: true // 是否在浏览器支持的情况下使用ForeignObject渲染
       }).then(function (canvas) {
         loading.close()
@@ -38,7 +38,7 @@ export default {
           PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
         } else {
           while (leftHeight > 0) {
-            PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
             leftHeight -= pageHeight
             position -= 841.89
             if (leftHeight > 0) {
diff --git a/nezha-fronted/src/components/common/mixin/htmlToPdfMixin.js b/nezha-fronted/src/components/common/mixin/htmlToPdfMixin.js
index 03048022a..671296323 100644
--- a/nezha-fronted/src/components/common/mixin/htmlToPdfMixin.js
+++ b/nezha-fronted/src/components/common/mixin/htmlToPdfMixin.js
@@ -1,3 +1,13 @@
 export default {
-
+  methods: {
+    htmlToPdf () {
+      const dom = document.getElementsByClassName(this.pdfId)[0]
+      if (dom) {
+        this.showScreenLoading(true)
+        this.getPdf(dom)
+      } else {
+        this.showScreenLoading(false)
+      }
+    }
+  }
 }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index fd67db3f8..2f43533e7 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel list-page" v-my-loading="panelTabLoading">
+  <div class="panel list-page" v-loading="panelTabLoading">
     <div class="main-list">
       <div>
         <transition name="el-zoom-in-center">
@@ -75,7 +75,7 @@
                     <div id="chart-temp-sync" @click="chartBySync"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
                   </el-dropdown-item>
                   <el-dropdown-item v-has="'main_add'">
-                    <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-sync"></i>{{ $t('overall.syncChart') }}</div>
+                    <div id="chart-htmltopdf" @click="htmlToPdf"><i class="nz-icon nz-icon-download1"></i>{{ $t('overall.downloadToPdf') }}</div>
                   </el-dropdown-item>
                 </template>
               </top-tool-more-options>
@@ -84,7 +84,7 @@
         </div>
         <div id="tableList" class="table-list" style='overflow-y: unset'>
           <div class="table-list-box">
-            <div  id="dashboardScrollbar" class="box-content" v-my-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
+            <div  id="dashboardScrollbar" class="box-content" v-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
               <chart-list
                 ref="chartList"
                 name="panel"
@@ -126,7 +126,7 @@
 <!--      ></chart-box>-->
       <chart-right-box
         v-if="chartRightBoxShow"
-        v-my-loading="rightBox.loading"
+        v-loading="rightBox.loading"
         ref="addChartModal"
         :chart="chart"
         :from="fromRoute.panel"
@@ -834,7 +834,7 @@ export default {
     htmlToPdf () {
       let dom = document.getElementsByClassName(this.pdfId)[0]
       if (dom) {
-        dom = dom.getElementsByClassName('vue-grid-layout')[0]
+        // dom = dom.getElementsByClassName('vue-grid-layout')[0]
         this.scrollbarWrap.scrollTop = this.scrollbarWrap.scrollHeight
         this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
         let flag = true
@@ -855,10 +855,12 @@ export default {
             timer = null
             setTimeout(() => {
               document.body.style.height = 'auto'
-              document.getElementsByTagName('html')[0].style.overflow = 'visible'
+              // document.getElementsByTagName('html')[0].style.overflow = 'visible'
               const position = dom.getBoundingClientRect()
+              console.log(position)
               this.getPdf(dom, -1 * position.left, -1 * position.top)
-            }, 500)
+              // this.getPdf(dom, 0, 0)
+            }, 2000)
           }
         }, 200)
       } else {