bug修复

package-lock.json

@@ -266,6 +266,11 @@
         "through": ">=2.2.7 <3"
       }
     },
+    "abab": {
+      "version": "1.0.4",
+      "resolved": "http://r.cnpmjs.org/abab/download/abab-1.0.4.tgz",
+      "integrity": "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4="
+    },
     "abbrev": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@@ -294,6 +299,21 @@
         "acorn": "^5.0.0"
       }
     },
+    "acorn-globals": {
+      "version": "1.0.9",
+      "resolved": "http://r.cnpmjs.org/acorn-globals/download/acorn-globals-1.0.9.tgz",
+      "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+      "requires": {
+        "acorn": "^2.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "http://r.cnpmjs.org/acorn/download/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc="
+        }
+      }
+    },
     "acorn-jsx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
@@ -512,6 +532,11 @@
       "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
       "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
     },
+    "array-equal": {
+      "version": "1.0.0",
+      "resolved": "http://r.cnpmjs.org/array-equal/download/array-equal-1.0.0.tgz",
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
+    },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -2178,6 +2203,24 @@
       "integrity": "sha512-7uo4mQgSWK9lmGKpuXhW1HYfOOF3le+coG/h0Op/AAEvjOuVO9mQQo4EW2WrtOZgxgnLIxVVr57aKT8G5woFoQ==",
       "dev": true
     },
+    "canvg": {
+      "version": "1.5.3",
+      "resolved": "http://r.cnpmjs.org/canvg/download/canvg-1.5.3.tgz",
+      "integrity": "sha1-qtF5FfMzaL+OuAsl0SnjrpIt3F8=",
+      "requires": {
+        "jsdom": "^8.1.0",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^1.4.1",
+        "xmldom": "^0.1.22"
+      },
+      "dependencies": {
+        "stackblur-canvas": {
+          "version": "1.4.1",
+          "resolved": "http://r.cnpmjs.org/stackblur-canvas/download/stackblur-canvas-1.4.1.tgz",
+          "integrity": "sha1-hJqm+UsnL/JvZHH6QTDtH35HlVs="
+        }
+      }
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -2987,11 +3030,18 @@
       "dev": true
     },
     "css-line-break": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
-      "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+      "version": "1.1.1",
+      "resolved": "http://r.cnpmjs.org/css-line-break/download/css-line-break-1.1.1.tgz",
+      "integrity": "sha1-1em90peEAJnrBQPHMQ/TSSegJu8=",
       "requires": {
-        "base64-arraybuffer": "^0.1.5"
+        "base64-arraybuffer": "^0.2.0"
+      },
+      "dependencies": {
+        "base64-arraybuffer": {
+          "version": "0.2.0",
+          "resolved": "http://r.cnpmjs.org/base64-arraybuffer/download/base64-arraybuffer-0.2.0.tgz",
+          "integrity": "sha1-S5RPrAGRqlkHr+LYyZnMxXzoD0U="
+        }
       }
     },
     "css-loader": {
@@ -3131,6 +3181,19 @@
         }
       }
     },
+    "cssom": {
+      "version": "0.3.8",
+      "resolved": "http://r.cnpmjs.org/cssom/download/cssom-0.3.8.tgz",
+      "integrity": "sha1-nxJ29bK0Y/IRTT8sdSUK+MGjb0o="
+    },
+    "cssstyle": {
+      "version": "0.2.37",
+      "resolved": "http://r.cnpmjs.org/cssstyle/download/cssstyle-0.2.37.tgz",
+      "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
+      "requires": {
+        "cssom": "0.3.x"
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -4609,6 +4672,10 @@
         "loader-utils": "~0.2.5"
       }
     },
+    "file-saver": {
+      "version": "github:eligrey/FileSaver.js#e865e37af9f9947ddcced76b549e27dc45c1cb2e",
+      "from": "github:eligrey/FileSaver.js#1.3.8"
+    },
     "file-type": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
@@ -6236,11 +6303,11 @@
       }
     },
     "html2canvas": {
-      "version": "1.0.0-alpha.12",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-alpha.12.tgz",
-      "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+      "version": "1.0.0-rc.5",
+      "resolved": "http://r.cnpmjs.org/html2canvas/download/html2canvas-1.0.0-rc.5.tgz",
+      "integrity": "sha1-TuPKyfbiCg+gwvNab5nJYK5+xME=",
       "requires": {
-        "css-line-break": "1.0.1"
+        "css-line-break": "1.1.1"
       }
     },
     "htmlescape": {
@@ -7061,6 +7128,42 @@
       "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
       "optional": true
     },
+    "jsdom": {
+      "version": "8.5.0",
+      "resolved": "http://r.cnpmjs.org/jsdom/download/jsdom-8.5.0.tgz",
+      "integrity": "sha1-1Nj12/J2hjW2KmKCO5R89wcevJg=",
+      "requires": {
+        "abab": "^1.0.0",
+        "acorn": "^2.4.0",
+        "acorn-globals": "^1.0.4",
+        "array-equal": "^1.0.0",
+        "cssom": ">= 0.3.0 < 0.4.0",
+        "cssstyle": ">= 0.2.34 < 0.3.0",
+        "escodegen": "^1.6.1",
+        "iconv-lite": "^0.4.13",
+        "nwmatcher": ">= 1.3.7 < 2.0.0",
+        "parse5": "^1.5.1",
+        "request": "^2.55.0",
+        "sax": "^1.1.4",
+        "symbol-tree": ">= 3.1.0 < 4.0.0",
+        "tough-cookie": "^2.2.0",
+        "webidl-conversions": "^3.0.1",
+        "whatwg-url": "^2.0.1",
+        "xml-name-validator": ">= 2.0.1 < 3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "http://r.cnpmjs.org/acorn/download/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc="
+        },
+        "parse5": {
+          "version": "1.5.1",
+          "resolved": "http://r.cnpmjs.org/parse5/download/parse5-1.5.1.tgz",
+          "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ="
+        }
+      }
+    },
     "jsesc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
@@ -7156,6 +7259,42 @@
       "resolved": "https://registry.npmjs.org/jspack/-/jspack-0.0.4.tgz",
       "integrity": "sha1-Mt01x/3LPjRWwY+7fvntC8YjgXc="
     },
+    "jspdf": {
+      "version": "1.5.3",
+      "resolved": "http://r.cnpmjs.org/jspdf/download/jspdf-1.5.3.tgz",
+      "integrity": "sha1-WhLAEUed76vvVzXeVckTBg7SGfI=",
+      "requires": {
+        "canvg": "1.5.3",
+        "file-saver": "github:eligrey/FileSaver.js#1.3.8",
+        "html2canvas": "1.0.0-alpha.12",
+        "omggif": "1.0.7",
+        "promise-polyfill": "8.1.0",
+        "stackblur-canvas": "2.2.0"
+      },
+      "dependencies": {
+        "css-line-break": {
+          "version": "1.0.1",
+          "resolved": "http://r.cnpmjs.org/css-line-break/download/css-line-break-1.0.1.tgz",
+          "integrity": "sha1-GfIGOjPpX7KDG4ZEbAuAwYivRQo=",
+          "requires": {
+            "base64-arraybuffer": "^0.1.5"
+          }
+        },
+        "html2canvas": {
+          "version": "1.0.0-alpha.12",
+          "resolved": "http://r.cnpmjs.org/html2canvas/download/html2canvas-1.0.0-alpha.12.tgz",
+          "integrity": "sha1-OxmS48mz9WBjw1/WIElPN+uohRM=",
+          "requires": {
+            "css-line-break": "1.0.1"
+          }
+        },
+        "promise-polyfill": {
+          "version": "8.1.0",
+          "resolved": "http://r.cnpmjs.org/promise-polyfill/download/promise-polyfill-8.1.0.tgz",
+          "integrity": "sha1-MAWdpU0TWM6QWsWB8ofhhK7fmV0="
+        }
+      }
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -9375,6 +9514,11 @@
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
+    "nwmatcher": {
+      "version": "1.4.4",
+      "resolved": "http://r.cnpmjs.org/nwmatcher/download/nwmatcher-1.4.4.tgz",
+      "integrity": "sha1-IoVjHzSpXw0Dlc2QDJbtObWPNG4="
+    },
     "oauth-sign": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
@@ -9407,6 +9551,11 @@
         "is-extendable": "^0.1.1"
       }
     },
+    "omggif": {
+      "version": "1.0.7",
+      "resolved": "http://r.cnpmjs.org/omggif/download/omggif-1.0.7.tgz",
+      "integrity": "sha1-WdLuywJj3oRjWz/riHwMmXPx5J0="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -11323,6 +11472,11 @@
         "onetime": "^1.0.0"
       }
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "http://r.cnpmjs.org/rgbcolor/download/rgbcolor-1.0.1.tgz",
+      "integrity": "sha1-1lBezbMEplldom+ktDMHMGd1lF0="
+    },
     "right-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
@@ -11528,8 +11682,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "scss-tokenizer": {
       "version": "0.2.3",
@@ -12083,6 +12236,11 @@
         }
       }
     },
+    "stackblur-canvas": {
+      "version": "2.2.0",
+      "resolved": "http://r.cnpmjs.org/stackblur-canvas/download/stackblur-canvas-2.2.0.tgz",
+      "integrity": "sha1-ysxZJKB0Sz4YPrLmwdhVnBoXwm4="
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -12378,6 +12536,11 @@
         }
       }
     },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "http://r.cnpmjs.org/symbol-tree/download/symbol-tree-3.2.4.tgz",
+      "integrity": "sha1-QwY30ki6d+B4iDlR+5qg7tfGP6I="
+    },
     "syntax-error": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/syntax-error/-/syntax-error-1.4.0.tgz",
@@ -12645,11 +12808,15 @@
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
       "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
-      "optional": true,
       "requires": {
         "punycode": "^1.4.1"
       }
     },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "http://r.cnpmjs.org/tr46/download/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -13427,6 +13594,11 @@
         "argparse": "^1.0.6"
       }
     },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "http://r.cnpmjs.org/webidl-conversions/download/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
     "webpack": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-1.15.0.tgz",
@@ -13643,6 +13815,15 @@
         }
       }
     },
+    "whatwg-url": {
+      "version": "2.0.1",
+      "resolved": "http://r.cnpmjs.org/whatwg-url/download/whatwg-url-2.0.1.tgz",
+      "integrity": "sha1-U5ayBD8CDub3BNnEXqhRnnJN5lk=",
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "whet.extend": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
@@ -13730,6 +13911,11 @@
       "integrity": "sha1-OS2LotDxw00e4tYw8V0O+2jhBIo=",
       "dev": true
     },
+    "xml-name-validator": {
+      "version": "2.0.1",
+      "resolved": "http://r.cnpmjs.org/xml-name-validator/download/xml-name-validator-2.0.1.tgz",
+      "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU="
+    },
     "xmldom": {
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz",

package.json

@@ -37,12 +37,13 @@
     "formidable": "^1.2.1",
     "github-markdown-css": "^2.4.1",
     "hbs": "~4.0.1",
-    "html2canvas": "^1.0.0-alpha.12",
+    "html2canvas": "^1.0.0-rc.5",
     "iconv-lite": "~ 0.4.4",
     "install.js": "^1.0.1",
     "jquery": "^3.3.1",
     "jsonwebtoken": "^7.1.9",
     "jspack": "~ 0.0.3",
+    "jspdf": "^1.5.3",
     "less-middleware": "~2.2.0",
     "lodash": "~ 2.4",
     "lrz": "^4.9.40",

src/main.js

@@ -21,6 +21,8 @@ Vue.use(VueRouter)
 Vue.use(Vuex)
 Vue.use(ElementUI)
 
+import htmlToPdf from './util/htmlToPdf' // 路径仅为示例
+Vue.use(htmlToPdf)
 // 全局样式
 import 'normalize.css'
 import 'element-ui/lib/theme-chalk/index.css'

src/util/htmlToPdf.js

@@ -0,0 +1,37 @@
+// 导出页面为PDF格式
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+export default {
+  install(Vue, options) {
+    Vue.prototype.getPdf = function () {
+      let title = this.htmlTitle
+      html2Canvas(document.querySelector('#pdfDom'), {
+        allowTaint: true
+      }).then(function (canvas) {
+        let contentWidth = canvas.width
+        let contentHeight = canvas.height
+        let pageHeight = contentWidth / 592.28 * 841.89
+        let leftHeight = contentHeight
+        let position = 0
+        const imgWidth = 595.28
+        let imgHeight = 592.28 / contentWidth * contentHeight
+        let pageData = canvas.toDataURL('image/jpeg', 1.0)
+        let PDF = new JsPDF('', 'pt', 'a4')
+        if (leftHeight < pageHeight) {
+          PDF.addImage(pageData, 'JPEG', 0, 10, imgWidth, imgHeight)
+        } else {
+          while (leftHeight > 0) {
+            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
+            leftHeight -= pageHeight
+            position -= 841.89
+            if (leftHeight > 0) {
+              PDF.addPage()
+            }
+          }
+        }
+        PDF.save(title + '.pdf')
+      }
+      )
+    }
+  }
+}

src/views/testData/testData.html

@@ -136,10 +136,12 @@
               <div class="option">{{optionItem.content}}</div>
               <div class="numbers">{{optionItem.answerCount}}</div>
               <div class="percent">
-                <el-progress
-                  :percentage="item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0)"
-                  color="#4E5DFF" :stroke-width="8">
-                </el-progress>
+                <div style="width: 100%;">
+                  <el-progress
+                    :percentage="item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0)"
+                    color="#4E5DFF" :stroke-width="8">
+                  </el-progress>
+                </div>
               </div>
             </div>
             <div class="tableRow">

src/views/testData/testData.js

@@ -108,6 +108,11 @@ export default {
 
         this.analyseOptions = arr;
       }
+    },
+    options: function (val) {
+      if (val) {
+        this.getCondition();
+      }
     }
   },
   created() {
@@ -133,6 +138,9 @@ export default {
       console.log("XXXxXXX", list);
       this.dataList = list;
 
+      this.analyseOptions = [];
+      this.analyseValue = [];
+
       this.answerData = [];
       this.options = []
       this.questionList = []
@@ -202,8 +210,6 @@ export default {
           }
           console.log("answerData", answerData);
           this.answerData = answerData;
-          // 查询数据包列表
-          this.getCondition();
         } else {
           console.log("error");
         }
@@ -222,7 +228,6 @@ export default {
             var question = questionList[i];
             var disabled = false;
             const found = this.value.find(element => element[1] == question.questionId);
-            console.log("XXXXXXXXXfound", found);
             if (found) {
               disabled = true
             }
@@ -250,12 +255,10 @@ export default {
             var disabled = false;
 
             const foundX = this.optionsXValue.find(element => element[1] == question.questionId);
-            console.log("XXXXXXXXXfound", foundX);
             if (foundX) {
               disabled = true
             }
             const foundY = this.optionsYValue.find(element => element[1] == question.questionId);
-            console.log("XXXXXXXXXfound", foundY);
             if (foundY) {
               disabled = true
             }
@@ -282,12 +285,10 @@ export default {
             var disabled = false;
 
             const foundX = this.optionsXValue.find(element => element[1] == question.questionId);
-            console.log("XXXXXXXXXfound", foundX);
             if (foundX) {
               disabled = true
             }
             const foundY = this.optionsYValue.find(element => element[1] == question.questionId);
-            console.log("XXXXXXXXXfound", foundY);
             if (foundY) {
               disabled = true
             }

src/views/testData/testData.scss

@@ -413,13 +413,12 @@
         .tableRow {
           display: flex;
           flex-direction: row;
-          height: 32px;
+          min-height: 32px;
           font-size:14px;
           font-family:PingFangSC-Regular,PingFang SC;
           font-weight:400;
           color:rgba(0,0,0,0.65);
           line-height:21px;
-          align-items:flex-end;
           .option {
            flex-grow: 2;
            height: 100%;
@@ -427,24 +426,30 @@
            padding-left: 25px;
            box-sizing: border-box;
            border-top:1px solid rgba(232,232,232,1);
+          padding: 8px 15px;
           }
           .numbers {
             width:236px;
-            height: 100%;
-            padding-top: 8px;
+            min-height: 100%;
+            padding: 0px 15px;
             padding-left: 25px;
             box-sizing: border-box;
             border-left:1px solid rgba(232,232,232,1);
             border-right:1px solid rgba(232,232,232,1);
             border-top:1px solid rgba(232,232,232,1);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
           }
           .percent {
             width: 408px;
-            height: 100%;
-            padding-top: 8px;
+            min-height: 100%;
             padding-left: 25px;
             box-sizing: border-box;
             border-top:1px solid rgba(232,232,232,1);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
           }
         }
       }