下载pdf

package-lock.json

@@ -125,6 +125,12 @@
       "integrity": "sha1-FZJUFOCtLNdlv+9YhC9+JqesyyQ=",
       "dev": true
     },
+    "@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmmirror.com/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "@vant/icons": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.5.2.tgz?cache=0&sync_timestamp=1613997425951&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.5.2.tgz",
@@ -548,8 +554,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz",
-      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k=",
-      "dev": true
+      "integrity": "sha1-bZUX654DDSQ2ZmZR6GvZ9vE1M8k="
     },
     "autoprefixer": {
       "version": "7.2.6",
@@ -1733,6 +1738,11 @@
         "electron-to-chromium": "^1.3.30"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npm.taobao.org/buffer/download/buffer-4.9.2.tgz?cache=0&sync_timestamp=1606098108344&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-4.9.2.tgz",
@@ -2040,6 +2050,36 @@
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001400.tgz",
       "integrity": "sha512-Mv659Hn65Z4LgZdJ7ge5JTVbE3rqbJaaXgW5LEI9/tOaXclfIZ8DW7D7FCWWWmWiiPS7AC48S8kf3DApSxQdgA=="
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmmirror.com/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.36.0",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.36.0.tgz",
+          "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+          "optional": true
+        },
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+          "optional": true
+        }
+      }
+    },
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmmirror.com/caseless/-/caseless-0.12.0.tgz",
@@ -4236,6 +4276,12 @@
         "domelementtype": "1"
       }
     },
+    "dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.7.0.tgz?cache=0&sync_timestamp=1607393087316&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.7.0.tgz",
@@ -6536,6 +6582,47 @@
       "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
       "dev": true
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.23.9",
+          "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.9.tgz",
+          "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+          "requires": {
+            "regenerator-runtime": "^0.14.0"
+          }
+        },
+        "core-js": {
+          "version": "3.36.0",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.36.0.tgz",
+          "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+          "optional": true
+        },
+        "fflate": {
+          "version": "0.4.8",
+          "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.4.8.tgz",
+          "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+        },
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
+      }
+    },
     "jsprim": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/jsprim/-/jsprim-1.4.2.tgz",
@@ -9016,8 +9103,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "picomatch": {
       "version": "2.2.2",
@@ -11546,6 +11632,15 @@
       "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
@@ -11977,6 +12072,12 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "right-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npm.taobao.org/right-align/download/right-align-0.1.3.tgz",
@@ -12895,6 +12996,12 @@
       "integrity": "sha1-g26zyDgv4pNv6vVEYxAXzn1Ho88=",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmmirror.com/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true
+    },
     "stackframe": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/stackframe/download/stackframe-1.2.0.tgz?cache=0&sync_timestamp=1590854108362&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstackframe%2Fdownload%2Fstackframe-1.2.0.tgz",
@@ -13134,6 +13241,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmmirror.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "svgo": {
       "version": "0.7.2",
       "resolved": "https://registry.npm.taobao.org/svgo/download/svgo-0.7.2.tgz",

package.json

@@ -24,11 +24,13 @@
     "highcharts": "^11.1.0",
     "highcharts-vue": "^1.4.3",
     "html-docx-js": "^0.3.1",
+    "html2canvas": "^1.4.1",
     "image-conversion": "^2.1.1",
     "jquery": "^3.6.0",
     "js-audio-recorder": "^1.0.7",
     "js-pinyin": "^0.1.9",
     "jsmind": "^0.4.8",
+    "jspdf": "^2.5.1",
     "lamejs": "^1.2.1",
     "language-hk-loader": "^1.0.1",
     "pdfjs-dist": "^2.5.207",

src/components/pages/kindStudentEva/test/component/fieldMap.vue

@@ -2,7 +2,7 @@
   <!-- 健康的 -->
   <div>
     <div
-      style="background-color: #fff;width: 100%;height: 100%;box-sizing: border-box; padding: 15px;"
+      style="background-color: #fff;width: 100%;height: 100%;"
     >
       <div style="margin: 20px 10px;">{{ tit }}领域综合表现</div>
       <div class="content">
@@ -28,7 +28,7 @@
         </div>
         <div
           style="display: flex;justify-content: flex-start;width: 100%;margin-top: 10px;margin-left: 30px;"
-          v-if="fieldEvidence.length"
+          v-if="fieldEvidence.length && !isPdf"
         >
           <div
             :class="[proofIsShow ? 'proofCss' : 'proofCss2']"
@@ -96,6 +96,10 @@ export default {
     year: {
       type: String,
       default: ""
+    },
+    isPdf: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/components/pages/kindStudentEva/test/index.vue

@@ -27,7 +27,10 @@
           <div>学情报告</div>
         </div>
       </div>
-      <div class="backClassCss" @click="backClaBtn">返回</div>
+      <div style="display: flex;">
+        <div class="backClassCss" @click="saveScore" v-if="type == 2">保存评分</div>
+        <div class="backClassCss" @click="backClaBtn">返回</div>
+      </div>
     </div>
     <div class="i_body_contant">
       <Diary
@@ -38,6 +41,7 @@
         :cid="cid"
       ></Diary>
       <Score
+        ref="score"
         v-if="type == 2"
         :oid="oid"
         :userid="userid"
@@ -80,6 +84,9 @@ export default {
     };
   },
   methods: {
+    saveScore(){
+      this.$refs.score.saveSRJson();
+    },
     checkType(type) {
       this.type = type;
     },
@@ -127,7 +134,7 @@ export default {
   flex-wrap: nowrap;
   align-items: center;
 }
-.i_body_title > .backClassCss {
+.i_body_title > div > .backClassCss {
   background-color: #3681fc;
   font-size: 16px;
   color: #fff;
@@ -137,6 +144,7 @@ export default {
   align-items: center;
   border-radius: 3px;
   cursor: pointer;
+  margin-left: 20px;
 }
 .i_body_title > .title_box > .title_item {
   cursor: pointer;

src/components/pages/kindStudentEva/test/report.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="report">
-    <div class="reportContent">
+  <div class="report" v-loading="fullscreenLoading">
+    <div class="reportContent" ref="reportPdf">
       <div class="top">
-        <div style="width: 348px;height: 40px;flex-shrink: 0;">
+        <div style="width: 348px;height: 40px;flex-shrink: 0;" v-if="!isPdf">
           <el-select
             v-model="year"
             @change="getData"
@@ -18,18 +18,29 @@
             </el-option>
           </el-select>
         </div>
+        <div v-else>
+          <div
+            v-for="(item, index) in termList"
+            v-if="item.id === year"
+            :key="index"
+            style="width: 348px;height: 40px;margin-left: 10px; flex-shrink: 0;"
+          >
+            {{ item.name }}
+          </div>
+        </div>
 
-        <!-- <div class="topBtnS">
-          <div class="btn">生成pdf</div>
-          <div class="btn">分享报告</div>
-        </div> -->
+        <div class="topBtnS">
+          <div v-if="!isPdf" class="btn" @click="savePop">
+            生成pdf
+          </div>
+          <!-- <div class="btn">分享报告</div> -->
+        </div>
       </div>
       <div style="margin: 20px 10px;">学期综合表现</div>
       <div
         style="font-size: 20px;width: 100%;height: 200px;display: flex;justify-content: center;"
         v-if="isShow"
       >
-
         暂无数据
       </div>
 
@@ -65,6 +76,7 @@
             :tid="i.id"
             :tit="i.name"
             :userid="userid"
+            :isPdf="isPdf"
             :year="year"
             :radarData="radarData"
             :key="radarData.toString()"
@@ -82,6 +94,9 @@ import croColumnar from "./component/croColumnar";
 // import verColumnar from "./component/verColumnar";
 import popTable from "./component/popTable";
 import fieldMap from "./component/fieldMap";
+
+import html2Canvas from "html2canvas";
+import JsPDF from "jspdf";
 export default {
   components: {
     radar,
@@ -122,7 +137,12 @@ export default {
       radarData: {},
 
       // 判断无数据的显示
-      isShow: false
+      isShow: false,
+
+      // 下载pdf时进行判断显示
+      isPdf: false,
+
+      fullscreenLoading: false
     };
   },
   methods: {
@@ -256,6 +276,9 @@ export default {
     // 获取打分数据
     getData() {
       // this.isLoading = true;
+      this.chartData = []; //数据
+      this.categories = []; //标签    雷达图与平均分共用
+      this.fullscreenLoading = true;
 
       let params = {
         uid: this.userid,
@@ -271,6 +294,7 @@ export default {
           if (!res.data[0].length) {
             // this.clearRadarData();
             this.isShow = true;
+            this.fullscreenLoading = false;
             return;
           }
           this.isShow = false;
@@ -280,6 +304,8 @@ export default {
 
           // console.log("this.radarData", this.radarData);
           this.getVeidooType();
+          this.fullscreenLoading = false;
+
           // this.getEvidence();
 
           // console.log(JSON.s);
@@ -420,11 +446,75 @@ export default {
       }
 
       return result;
+    },
+
+    // 下载pdf弹框
+    savePop() {
+      this.$confirm("是否下载?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      })
+        .then(() => {
+          // 下载pdf
+          this.isPdf = true;
+          this.fullscreenLoading = true;
+          setTimeout(() => {
+            this.savePdf();
+          }, 1000);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消"
+          });
+        });
+    },
+
+    // 下载pdf
+    savePdf() {
+      let _this = this;
+      html2Canvas(this.$refs.reportPdf, {
+        //导出的html元素
+        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;
+        let 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, 0, 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("学情报告" + ".pdf");
+
+        _this.$message.success("保存成功!");
+
+        setTimeout(() => {
+          _this.isPdf = false;
+          _this.fullscreenLoading = false;
+        }, 500);
+      });
     }
   },
   mounted() {},
   created() {
+    this.fullscreenLoading = true;
+
     this.getYear();
+    // console.log('数据',this.$route.query);
   }
 };
 </script>
@@ -433,6 +523,7 @@ export default {
 /deep/ .el-dialog {
   width: 1000px;
 }
+
 /deep/ .el-dialog__title {
   color: rgba(0, 0, 0, 0.9);
   text-align: center;
@@ -446,15 +537,16 @@ export default {
   box-sizing: border-box;
   padding: 15px;
   height: 100%;
+  overflow-y: scroll;
 }
 .report > .reportContent {
   background-color: #fff;
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
   box-sizing: border-box;
   padding: 15px;
 
-  overflow-y: scroll;
+  /* overflow-y: scroll; */
   overflow-x: hidden;
   /* overflow: hidden; */
 }
@@ -482,6 +574,7 @@ export default {
   align-items: center;
   margin-left: 10px;
   gap: 10px;
+  cursor: pointer;
 }
 .content {
   width: 100%;

src/components/pages/kindStudentEva/test/score.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scoreBox">
+  <div class="scoreBox" v-loading="Loading">
     <div class="sBox_top">
       <div class="sTop_select">
         <el-select
@@ -19,6 +19,23 @@
       </div>
       <!-- <div class="sTop_button">查看评分标准</div> -->
     </div>
+    <!-- <table border="1">
+      <tr>
+        <td>学习领域</td>
+        <td>一级发展目标</td>
+        <td>学期初始评分</td>
+        <td>期中评分</td>
+        <td>期末评分</td>
+        <td>平均分</td>
+        <td>关联证据</td>
+      </tr>
+      <tr v-for="(item, index) in scoreJson" :key="index">
+        <td>
+          {{ item.name }}
+        </td>
+      </tr>
+    </table> -->
+
     <div class="sBox_table">
       <div class="table_title">
         <div>学习领域</div>
@@ -89,9 +106,9 @@
             </div>
           </div>
         </div>
-        <div class="saveBox">
+        <!-- <div class="saveBox">
           <div style="box-sizing: border-box;padding: 3px 10px;" @click="saveSRJson">保存评分</div>
-        </div>
+        </div> -->
       </div>
     </div>
     <el-dialog
@@ -147,7 +164,8 @@ export default {
       scoreJson: {},
       dialogVisibleReport: false,
       fid: "",
-      tid: ""
+      tid: "",
+      Loading: false
     };
   },
   computed: {
@@ -232,6 +250,11 @@ export default {
             this.scoreJson = scoreJson;
           }
           this.scoreType = allfType;
+          this.Loading = false;
+
+          // console.log("this.scoreJson", this.scoreJson);
+
+          // console.log("this.scoreType", this.scoreType);
         })
         .catch(err => {
           this.isLoading = false;
@@ -271,19 +294,32 @@ export default {
       });
     },
     saveSRJson() {
-      let params = {
-        uid: this.userid,
-        j: JSON.stringify(this.scoreJson),
-        t: this.year
-      };
-      this.ajax
-        .get(this.$store.state.api + "addSRScore", params)
-        .then(res => {
-          this.$message.success("保存成功!");
-          this.searchStudentScore();
+      this.$confirm("是否保存?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消"
+      })
+        .then(() => {
+          console.log("保存了");
+          let params = {
+            uid: this.userid,
+            j: JSON.stringify(this.scoreJson),
+            t: this.year
+          };
+          this.ajax
+            .get(this.$store.state.api + "addSRScore", params)
+            .then(res => {
+              this.$message.success("保存成功!");
+              this.searchStudentScore();
+            })
+            .catch(err => {
+              console.error(err);
+            });
         })
-        .catch(err => {
-          console.error(err);
+        .catch(() => {
+          // this.$message({
+          //   type: "info",
+          //   message: ""
+          // });
         });
     }
   },
@@ -291,12 +327,25 @@ export default {
     // this.$nextTick(()=>{
     //   console.log(this.$refs.dialogRef);
     // })
+    this.Loading = true;
     this.getYear();
   }
 };
 </script>
 
 <style scoped>
+table {
+  border-collapse: collapse;
+}
+table,
+th,
+td {
+  border: 1px solid black;
+}
+td {
+  box-sizing: border-box;
+  padding: 15px 25px;
+}
 .dialog_diy {
   box-sizing: border-box;
   /* padding: 0 10px 10px 10px; */
@@ -341,12 +390,14 @@ export default {
   background: #fff;
   border-radius: 10px;
   width: 98%;
+  box-sizing: border-box;
+  padding: 0 15px;
   margin: 15px auto;
   overflow: auto;
   height: calc(100% - 30px);
 }
 .sBox_top {
-  width: 98%;
+  width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -374,7 +425,7 @@ export default {
   margin-left: 30px;
 }
 .sBox_table {
-  width: 98%;
+  width: 100%;
   margin: 0 auto;
   min-width: 1520px;
   font-size: 14px;